Question

如何修复底部列？宽度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>

Answer 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列，因为它更易于可视化。但是，实际上，两边的两列可以合并，因为它们总是并列在一起：

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>

Answer 2

在第一行第二列上使用colspan='2'。

<!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 colspan='2' style="width:50%;">Cell B</td>
  </tr>
    <tr>
    <td>Cell A</td>
    <td>Cell B</td>
    <td>Cell B</td>
  </tr>
</table>

</body>
</html>

Answer 3

您可以使用colspan告诉浏览器要一个单元格占用多少列：

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <table width="100%">
    <tr>
      <td>Cell A</td>
      <td colspan="2">Cell B</td>
    </tr>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
      <td>Cell B</td>
    </tr>
  </table>

</body>

</html>

html表格列宽

3 个答案: