HTML表格尺寸的格式问题

Question

我在创建无边框表格和等宽单元格方面遇到了问题。

为了测试，我将表格背景设置为红色，单元格背景设置为绿色。但总有一部分表格背景显示出来。

您有什么办法可以使其大小相同吗？

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

- mikeb29

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>

table { table-layout: fixed; }

或者

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

详细信息请参考：https://css-tricks.com/fixing-tables-long-strings/

（此文章介绍了如何解决表格中过长的字符串显示问题，适用于IT技术人员阅读）

- zer00ne

Answer 2

进一步说，@zer00ne，如果您可以的话，您可以将填充设置为0。

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

- Mosh Feu