表格即使列不占全宽度 [英] Table that occupies full width even when the columns don't

问题描述

我有一个类似这样的HTML表：

I have an HTML table like this one:

table { border-collapse: collapse; }

table thead th:nth-child(1) { width: 180px }
table thead th:nth-child(2) { width: 150px }
table thead th:nth-child(3) { width: 170px }

table thead tr { border-bottom:2px solid #222; }
table tbody tr { border-top:1px solid #ddd; }
table tbody tr:hover { background: #def; }

table tbody td { height: 40px; }

<div>
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1 1</td>
        <td>Content 1 2</td>
        <td>Content 1 3</td>
      </tr>
      <tr>
        <td>Content 2 1</td>
        <td>Content 2 2<br>Line 2<br>Line 3<br>Line 4</td>
        <td>Content 2 3</td>
      </tr>
      <tr>
        <td>Content 3 1</td>
        <td>Content 3 2</td>
        <td>Content 3 3</td>
      </tr>
    </tbody>
  </table>
</div>

这些列是将具有CSS中指定的不同固定宽度值，该值将定义表格的大小。在上面的示例中，列分别为180px，150px和170px，因此表格的宽度为500px。

The columns are going to have different fixed width values, specified in the CSS, which will define the size of the table. In the example above, the columns are 180px, 150px, and 170px respectively, so the table will be 500px wide.

由于设计原因，我们需要制作表格占容器的100％，不调整列的大小。这意味着，例如，如果屏幕为900px，则各列仍将占据其500px，但表应一直延伸到容器的末尾，以占据其余的400px。

Because of the design, we need to make the table occupy 100% of the container without resizing the columns. That means that, if for example the screen is 900px, the columns will still occupy their 500px, but the table should stretch until the end of the container to occupy the remaining 400px.

将表格宽度设置为100％，并添加一个自动占用剩余空间的新列将解决此问题。但是我们被要求避免添加这样的列，因为屏幕阅读器会遍历并将其读取为一个空单元格，这可能会使用户感到困惑。

Setting the table width to 100%, and adding a new column that occupies the remaining space automatically would fix the issue. But we have been asked to avoid adding such a column as screen readers will traverse it and read it as an empty cell, which could be confusing for users.

一个 hacky 选项将是添加一个伪元素，该伪元素占据页面的整个宽度（包装的 div 具有 overflow ：隐藏，如下面的演示所示。但是此解决方案的问题在于，如果表中的列占用的空间大于页面宽度，我们希望滚动包含 div 的列，但随后我们将看到

One hacky option would be to add a pseudo-element that occupies the whole width of the page (with the wrapping div having an overflow: hidden, like the demo below). But the issue with this solution is that if the table has columns that occupy more than the width of the page, we want the containing div to scroll, but then we'll see what seems like a huge empty row.

table { border-collapse: collapse; }

table thead th:nth-child(1),
table thead th:nth-child(1) { min-width: 180px }
table thead th:nth-child(2) { min-width: 150px }
table thead th:nth-child(3) { min-width: 170px }

table thead tr { border-bottom:2px solid #222; }
table tbody tr:not(:first-child) { border-top:1px solid #ddd; }
table tbody tr:hover { background: #def; }

table tbody td { height: 40px; }

div {
  overflow: hidden;
}
table tr::after {
  content: "";
  display: block;
  width: 100vw;
}

<div>
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1 1</td>
        <td>Content 1 2</td>
        <td>Content 1 3</td>
      </tr>
      <tr>
        <td>Content 2 1</td>
        <td>Content 2 2<br>Line 2<br>Line 3<br>Line 4</td>
        <td>Content 2 3</td>
      </tr>
      <tr>
        <td>Content 3 1</td>
        <td>Content 3 2</td>
        <td>Content 3 3</td>
      </tr>
    </tbody>
  </table>
</div>

表占据整个宽度的一种可访问的方法，但是列仅分配了它们的宽度？

Is there an accessible way of having the table occupy the whole width, but the columns only their allotted width?

推荐答案

我建议更改宽度第三列的宽度为 width：auto ，以将表标题（ th ）的内容左对齐并设置表的宽度到100％。

I suggest to change the width of the third column to width: auto, to left-align the table headers (th) contents and set the table's width to 100%. This will stretch the third colum to the right border of the page.

要强制第三列的内容不超过170px，可以添加向右填充：calc（100％-500px）; 到第三列的规则：

To force the contents of the third column to not be wider than 170px, you can add padding-right: calc(100% - 500px); to a rule for the third column:

table {
  border-collapse: collapse;
  width: 100%;
}

table thead th:nth-child(1) {
  width: 180px
}

table thead th:nth-child(2) {
  width: 150px
}

table thead th:nth-child(3),
table tbody td:nth-child(3){
  width: auto;
  padding-right: calc(100% - 500px);
}

table thead tr {
  border-bottom: 2px solid #222;
}

table tbody tr {
  border-top: 1px solid #ddd;
}

table tbody tr:hover {
  background: #def;
}

table tbody td {
  height: 40px;
}

th {
  text-align: left;
}

<div>
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1 1</td>
        <td>Content 1 2</td>
        <td>Content 1 3</td>
      </tr>
      <tr>
        <td>Content 2 1</td>
        <td>Content 2 2<br>Line 2<br>Line 3<br>Line 4</td>
        <td>Content 2 3</td>
      </tr>
      <tr>
        <td>Content 3 1</td>
        <td>Content 3 2</td>
        <td>Content 3 3 lots of content lots of content lots of content </td>
      </tr>
    </tbody>
  </table>
</div>

这篇关于表格即使列不占全宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！