Tables in IE do not have border when border = 0 in a css reset?
-
12-09-2019 - |
Question
In my css file, I have a reset where I am setting the border:0. This causes all tables in IE, not firefox to have no border. Even if I set the border inline on the table, it still does not show in IE. Does anyone know the solution to this?
Part of the rest:
table, img
{
border:0;
}
<table border="1">
<tr>
<td></td>
</tr>
</table>
Border shows up in firefox, but not in IE. Do I have to do style="border:1px solid black" in the table instead of border="1"
Solution
If you want that specific table to have a border, I would just give it a class:
table, img
{
border:0;
}
table.something
{
border: solid 1px #000000;
}
<table class="something">
<tr>
<td></td>
</tr>
</table>
That should work in all browsers.
OTHER TIPS
If you want a border you shouldn't set the border to 0. Try this instead:
table{
border: 2px;
}
That should work out better.
EDIT:
If you want to do it inline, you should do
<table border="2px">
Assuming that there's no typo in your code (in the question), have you tried adding a measurement unit to the inline setting?
<table border="1px">
For example?
Elsewise, try using CSS to re-/activate the borders:
<table style="border: 1px solid #000;"> <!-- or use a stylesheet, or style block, obviously -->
Have you checked that you're using a standards-compliant doctype declaration, and not lapsing into quirks-mode?
A couple standards-compliant ways to specify no border in css are:
border-width:0; border-style:none;
Table elements, td elements and th elements all accept borders so a safe way to ensure no borders at all would be table, td, th {border-style:none;}.
table {border-collapse:collapse;} is a purely css way of removing spacing between cells
Check out w3schools.com or w3.org for standards-compliant css tips
Your example table has nothing in it. IE decides it has no content and so does not show the "border="1" attribute.
Reset with
table {
border:none;
}
Then use:
<table style="border:solid 1px #000;>
<tr><td>x</td></tr>
</table>
have you tried
table {border-collapse: collapse;}
EDIT: wait, you're trying to get rid of the border or add it? Now I'm confused...