html - 如何使一个文本很少的表格在整个屏幕上延伸？

Question

我有一个非常简单的表格，有两列，我希望该表格在页面的整个宽度上延伸，而不管它包含的内容（它几乎不包含任何文本，这就是问题所在）：

<div>
  <table>
    <tr>
      <th>Title</th>
      <td>Some text</td>
    </tr>
  </table>
</div>

问题是：这在 Firefox 中不起作用（我什至不敢尝试 Internet Explorer）。

这是CSS：

div {
  max-width: 640px;
  float: left;
}

table {
  width: 100%;
}

table th,
table td {
  width: 100%; /* looks strange, but gives both columns equal length in Safari */
}

谁能告诉我我在这里想念什么？

谢谢你的帮助...

Answer 1

让你的th和td50% 宽，而不是 100% -演示

html, body {
    margin: 0;
    padding: 0;
}

table {   
    width: 100%;
    padding: 0;
}

table th, table td {   
    width: 50%;
    border: 1px solid red;
}

Answer 2

只需将CSS更改为

table th,
table td {
  width: 50%;
}

您目前遇到的问题是表格中的每个单元格都试图成为表格宽度的 100%。

参见例如

Answer 3

从 100%更改td为 50% 是正确的，但您还应该添加border-collapse到表格中，因为您在单元格上使用了边框。

width:80%也可以正常工作——不需要明确的 px 宽度（至少在 FF、Chrome 中不需要）

http://jsfiddle.net/UdbRQ/