如何正确设置我的 HTML 表格的列宽？答案

【问题标题】：How to correctly set the column widths on my HTML table?如何正确设置我的 HTML 表格的列宽？
【发布时间】：2016-06-28 17:17:05
【问题描述】：

这听起来像是一个基本问题。我知道如何使用 width 标签设置列宽。并通过使用 CSS。

获取此 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta content="en-gb" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
.tableStyle {
    border-collapse: collapse;
    border: 1px solid #000000;
}
</style>
</head>

<body>

<table class="tableStyle" style="width: 100%">
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
</table>

</body>

</html>

如果可能，我想做的是将第 2 列和第 3 列设置为显示这些列的内容所需的大小。并让第 1 列扩展以适应。

现在，我知道我可以将最后两列设置为，比如说，每列 10%。如果我将表格宽度设置为 100%，那么第 1 列将展开以适应。

但是，由于此 HTML 模板将用于 30 多种语言，因此列标题在某些语言中包含更多字符。另外，如果字体大小改变了也会扔掉。

那么有没有办法让最后两列自动调整大小以适应内容，第一列展开以适应？

谢谢。

安德鲁

【问题讨论】：

标签： html css

【解决方案1】：

使用<col> 标记，它代表表格中的每一列，并为其设置样式。这里有两种不同的方式来做你想做的事：

将第一列的宽度设置为 100%

table {
  width: 100%;
}

<table border="1">
  <col style="width: 100%">
  <col>
  <col>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
</table>

设置其他两列的宽度

table {
  width: 100%;
}

<table border="1">
  <col>
  <col style="width: 11%">
  <col style="width: 11%">
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
</table>

【讨论】：

谢谢。我使用了第一个建议。不过，我必须将结束 / 添加到 col 标签。谢谢！

【解决方案2】：

这是您需要应用于所有 3 列的 CSS

.tableStyle {
border-collapse: collapse;
border: 1px solid #000000;
table-layout:auto;
}

它将为您自动调整大小。加载需要更长的时间，但它会成功！希望这会有所帮助！

【讨论】：

感谢您的建议。不过，这会自动调整所有列的大小，这并不是我想要的。不过谢谢你的建议。

【解决方案3】：

在 HTML 中使用 colspan 将两列 width 合并为一列

【讨论】：

感谢您的建议。但我不想将任何单元格合并在一起。