Reputation: 43
I have a problem creating a borderless table and the cells the same width.
To test it, I've set the table background to red and the cell background to green. There is always part of the table background showing.
Any ideas on how to make it the same size?
<table style="background-color:red; border-collapse:collapse; border:10px; width:550px;">
<tbody>
<tr>
<td style="background-color: green; color:white; width:100%;">can't get rid of red bit<td>
</tr>
</tbody>
</table>
Upvotes: 4
Views: 60
Reputation: 29347
Further @zer00ne, you can set the padding to 0 (If you can)
td {
padding:0;
}
<table style="background-color:red; border-collapse:collapse; border:10px; width:550px;">
<tbody>
<tr>
<td style="background-color: green; color:white; width:100%;">can't get rid of red bit<td>
</tr>
</tbody>
</table>
http://output.jsbin.com/suzizo
Upvotes: 2
Reputation: 44118
<table style="background-color:red; border-collapse:collapse; border:10px; width:550px;">
<tbody>
<tr>
<td style="background-color: green; color:white; width:100%;">can't get rid of red bit
<td>
</tr>
</tbody>
</table>
<hr/>
<table style="background-color:red; table-layout: fixed; border-collapse:collapse; border:10px; width:550px;">
<tbody>
<tr>
<td style="background-color: green; color:white; width:100%;">No more red bit, YOU ARE VICTORIOUS!!!</td>
</tr>
</tbody>
</table>
table { table-layout: fixed; }
or
<table style="table-layout: fixed;">
for details: https://css-tricks.com/fixing-tables-long-strings/
Upvotes: 4