表格元素内两列之间的间距相等答案

【问题标题】：Equal spacing between two columns inside a table element表格元素内两列之间的间距相等
【发布时间】：2019-03-18 07:06:57
【问题描述】：

table {
width:100%;
}
td {
padding:15px;
}

<table>
  <tr>
    <td>100</td>
    <td>20A long text</td>
    <td>300</td>
    <td>300</td>

  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
    <td>300</td>

  </tr>
</table>

单元格的内容可以有不同的长度，单元格的宽度将根据内容而定。它必须看起来像这样

|---Text1---|---很长的文字---|---文字3---|

但这就是现在的样子

|--Text1--|--很长的文字--|--Text 3--|

重申一下，我不希望单元格宽度相等，但列之间的间距相等。

【问题讨论】：

能否提供您使用的 HTML 代码？您可以使用 padding & width CSS 来控制布局。
在此处发布您的代码
我已经添加了代码。请检查。
我认为您的意思是表格应该看起来好像所有单元格都具有相同的填充，对吧？然后你应该从你的例子中删除第二行，因为它会混淆事情。

标签： html css html-table multiple-columns

【解决方案1】：

不幸的是，我不知道用纯 CSS 实现这一点的方法。
作为一种解决方法，您可以使用 JavaScript 计算每个表格单元格达到 100% 宽度所需的宽度。

如何开始？请注意，我更改了 CSS 以将水平填充设置为 0（这是必要的，否则您必须将计算的填充合并到 JS 计算中）；我给了单元格边框（这不是必要的，但它更好地展示了所需的结果）。

let tbl = document.getElementById('tbl');
tbl.style.width = 'auto';
let extraSpace = document.body.clientWidth - tbl.offsetWidth;
let cols = tbl.rows[0].cells.length;
for (i = 0; i<cols; ++i) {
  let padding = Math.round(extraSpace/(cols-i));
  let cell = tbl.rows[0].cells[i];
  cell.style.width = (cell.clientWidth + padding) + 'px';
  extraSpace -= padding;
}

table {
  width: 100%;
}

td {
  padding: 15px 0;
  text-align: center;
  border:1px dotted gray;
}

<table id="tbl">
  <tr>
    <td>100</td>
    <td>20A long text</td>
    <td>300</td>
    <td>300</td>
  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
    <td>300</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

如果您删除width:100%，列将拉伸以适应内容，其间有相等的 15px 填充。目前 100% 的宽度导致表格自动重新分配可用空间以填充屏幕的宽度。

【讨论】：

但我希望表格占据父容器的整个宽度。
那么单元格之间的间隙不可能与您概述的完全相同，因为表格单元格的宽度总是会根据其中的内容而有所不同。您可以尝试为单元格添加宽度，但我认为它不会达到您想要的效果。
@CKA 你会用 JavaScript 吗？然后先绘制表格，看看它有多宽，并计算单元格需要多少填充才能使表格达到 100%。
您能否提供一个代码示例，说明如何使用 javascript 实现这一点？ @MrLister
@AlxTheRed 产品的要求是列之间的间距相等。不知道还有什么方法可以做到这一点。

【解决方案3】：

使用 CSS，您可以为 <td> 和 <th> 元素设置 padding-left 和 padding-right，以设置列之间的间距。

td, th {
  padding-left: 15px;
  padding-right: 15px;
}

<table border="1">
  <tr>
    <th>1st cell</th>
    <th>2nd cell</th>
    <th>3rd cell</th>
  </tr>
  <tr>
    <td>1st cell content</td>
    <td>2nd cell content</td>
    <td>3rd cell content</td>
  </tr>
</table>

【讨论】：

问题是表格宽度为100%时，无法达到预期的效果。表格的宽度需要与封闭容器一样大。

【解决方案4】：

对于下一个问题，请提供您的代码。
您可以将 CSS 属性 table-layout: fixed; 添加到表格标签

固定属性：设置固定的表格布局算法。表格和列的宽度由 table 和 col 的宽度或第一行单元格的宽度设置。其他行中的单元格不影响列宽。如果第一行没有宽度，则列宽在整个表格中均分，而与单元格内的内容无关

此外，您可以为单元格设置一个固定的填充（左右），以便左右固定有空格
这是一个例子

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

        .tab-cell {
            padding-left: 20px;
            padding-right:  20px;
        }

    </style>
</head>
<body>
    <table style="table-layout: fixed; text-align: center;" border="1">
        <tr>
            <th class = "tab-cell">Column A</th>
            <th class = "tab-cell">Column B</th>
            <th class = "tab-cell">Column C</th>
        </tr>
        <tr>
            <th class = "tab-cell">some content</th>
            <th class = "tab-cell">some looooooooooooooooooooooooooooooooong content</th>
            <th class = "tab-cell">some content</th>
        </tr>
    </table>
</body>
</html>

结果

希望对您有所帮助。
Hele

【讨论】：

正如我在问题中提到的，我不是在寻找相等的宽度。即使宽度相等，列之间的间距也不会均匀，这不是预期的行为。
我的代码不会创建具有等宽单元格的表格（实际上第 2 列大于 1 和 3），但是，正如您所问的，列之间的间距相等