时间戳

首页 > 解决方案 > html表格列宽

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

标签： htmlcss

解决方案

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

这意味着所有行必须具有相同数量的单元格。但是，您可以使用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>

推荐阅读