html表格列宽

新手上路,请多包涵

如何修复底栏?宽度 50% 并没有真正起作用。我想做 2 行和 3 行底部相同的宽度。

 <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <td style="width:50%;">Cell A</td>
    <td style="width:50%;">Cell B</td>
  </tr>
    <tr>
    <td>Cell A</td>
    <td>Cell B</td>
    <td>Cell B</td>
  </tr>
</table>

</body>
</html>

原文由 Infed 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 214
1 个回答

表列是相互连接的。因此,如果您放置一些迫使单元格变宽的内容,则整个列都会变宽。

这意味着所有行必须具有相同数量的单元格。但是,您可以使用 colspan 属性合并 2 个或更多单元格。

如果你想在一行上有 2 列,在其他行上有 3 列,你可能想要设置 6 个单元格并在两种情况下使用 colspan

 td {
  border: 1px solid #eee;
  text-align: center;
}
 <table style="width: 100%;">
  <tr>
    <td colspan="3" style="width:50%;">Cell A</td>
    <td colspan="3" style="width:50%;">Cell B</td>
  </tr>
  <tr>
    <td colspan="2">Cell A</td>
    <td colspan="2">Cell B</td>
    <td colspan="2">Cell C</td>
  </tr>
</table>

我将它们设为 6 列,因为它更易于可视化。但是,实际上每边的 2 列可以合并,因为它们总是 colspan-ed 在一起:

 td {
  border: 1px solid #eee;
  text-align: center;
}
 <table style="width: 100%;">
  <col width="33.3333%">
  <col width="16.6667%">
  <col width="16.6667%">
  <col width="33.3333%">
  <tr>
    <td colspan="2">Cell A</td>
    <td colspan="2">Cell B</td>
  </tr>
  <tr>
    <td>Cell A</td>
    <td colspan="2">Cell B</td>
    <td>Cell C</td>
  </tr>
</table>

原文由 tao 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏