Formatting issue using HTML table size

Question

I have a problem creating a borderless table and cells of the same width.

To test this, I set the table background to red and the cell background to green. Part of the background of the table is always displayed.

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>

Answer 1

<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>

Run codeHide result

table { table-layout: fixed; }

or

<table style="table-layout: fixed;">

for details: https://css-tricks.com/fixing-tables-long-strings/

Answer 2

Next @ zer00ne, you can indent 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>

Run codeHide result

http://output.jsbin.com/suzizo