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>

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/

Answer 2

进一步@ zer00ne，您可以将填充设置为0（如果可以）

＆＃13;

td {
  padding:0;
}

＆＃13;

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

＆＃13;

http://output.jsbin.com/suzizo

格式化HTML表大小调整的问题

2 个答案: