CODEWITHSUNDEEP
htmlcss
mikeb29
mikeb29

Reputation: 43

Formatting issue with HTML table sizing

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

Answers (2)

Mosh Feu
Mosh Feu

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

zer00ne
zer00ne

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

Related Questions