The upper graphic is from FF and Chrome. The bottom graphic is IE.
If I want the look for IE, what would I use for css for my table properties?
Thanks
Trying the get the exact same look in all browsers is an exercise in futility. If you are referring to the column widths, well unless you have specified the widths, the browser will expand the columns to fit the content.
A couple of screen grabs of empty tables doesn’t give anyone much to go on.
1 Like
Hi there javascript7,
as @Gandalf has pointed out…
Nevertheless, it is quite a simple matter to make the table element’s border
colours the same shades for all your browsers. 
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #fff;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
table {
border-width: 1px;
border-style: solid;
border-color: #cacaca #676767 #676767 #cacaca;
}
th, td {
padding: 1em 1.6em;
border-width: 1px;
border-style: solid;
border-color: #676767 #cacaca #cacaca #676767;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
coothead
5 Likes
Did you intend the rows of < th> under < tbody> to be < td> ?
1 Like
Hi there StevenHu,
Oooooops, I must have suffered another of my oft recurring “brain farts”. 
Thanks, for pointing out the error of my ways.
A quick edit of my post should spare me a little of the embarrassment. 
coothead
1 Like
I was mostly referring to that solid bubble look on the column/row lines. In other browsers it’s more of an open look. Is that something that be changed with css or is that just the way it is?
Thanks
You mean outset?
They both look the same in the images you posted, except for the contrast. What version of IE are you using?
Using IE 11.
If you look closely, there is a slight difference. It’s always been like that with IE vs others. I just like that look a little better and I didn’t know if there was css that would make it look like that in other browsers.
Yes, css can override the browsers default styling.
What would the css be to just give me the IE look in all browsers?
The css that @coothead posted is something like it.
It should at least be fairly consistent across browsers. If it is not exactly as you want you can tweak the values until it is.
Hi there javascript7,
the code that I provided made the the table in IE11 look like the table in Firefox.
But you want the Firefox table to look like the IE11 table.
Here is how my IE11 codes table borders…
…and this is the code…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #fff;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
table {
border-width: 1px;
border-style: solid;
border-color: #303030 #202020 #202020 #303030;
}
th, td {
padding: 1em 1.6em;
border-width: 1px;
border-style: solid;
border-color: #202020 #303030 #303030 #202020;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
coothead
Agree that your code looks the same in both. But what I would like to accomplish is the way the lines look in IE without any special css coding, and to have it look like IE. There is a difference in looks. In IE it’s almost like between the line is white and in the others there is a clear space.
PS: This look from IE appears to be when I switch to the Compatibility View Settings. So not sure if that can be replicated.
Hi there javascript7,
this CSS…
table {
border-width: 1px;
border-style: solid;
border-color: #efefef #9f9f9f #9f9f9f #efefef;
}
th, td {
padding: 1em 1.6em;
border-width: 1px;
border-style: solid;
border-color: #9f9f9f #efefef #efefef #9f9f9f;
}
…will give you a table that matches the IE11 image in your original post.
coothead
2 Likes
You are asking to change browser defaults so the “look” is consistent across browsers. To override the defaults, you will have to specifically assign all colors in CSS as shown by coothead.
I seriously recommend taking a course in HTML and CSS for a reality check.
Try this. It doesn’t attempt to fill your request.
Experiment by changing the colors…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="screen.css" media="screen">
<title>table,table-cell borders</title>
<!--
https://www.sitepoint.com/community/t/table-properties-for-ie-vs-chrome-ff/291374
-->
<style media="screen">
body {
font:100%/162% verdana,arial,helvetica,sans-serif;
}
table {
background-color:#aaa; /* background color between borders */
border-width:1px;
border-style:solid;
border-color:#cacaca #888 #888 #cacaca; /* top right bottom left */
}
th, td {
background-color:#ddf; /* cell background color */
padding:1em 1.6em;
border-width:1px;
border-style:solid;
border-color:#888 #cacaca #cacaca #888; /* top right bottom left */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
2 Likes
Yes, thank you. That is the look - I appreciate it.
Thank you , I will give this a try. I appreciate your time.
Don’t ever do that because the compatibility settings are mostly incompatible.
They’re hidden in IE11 (under a menu option) and removed in Edge of course. There is no real need to use them these days and as far as testing goes they produce unreliable results anyway. The compatibility view been a waste of time ever since it was first implemented and held back development.
3 Likes
This gives me the look that I was looking for in FF and Chrome, but it doesn’t give me the same look in IE. Now if I put IE in Comp. View Setting (which I don’t want to) it will give me that look.
What can I add to the code for it to look the same in IE.
Thank you.