Question

我有一个这样的HTML表：

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。

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

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

一个 hacky 选项将是添加一个伪元素，该伪元素占据页面的整个宽度（包装div具有overflow: hidden，如下面的演示所示））。但是此解决方案的问题在于，如果表中的列占用的空间超过了页面的宽度，我们希望滚动包含div的列，但随后我们将看到看起来像是一个巨大的空行。 / p>

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>

是否存在一种可访问的方式来使表格占据整个宽度，但列仅分配其宽度？

Answer 1

我建议将第三列的宽度更改为width: auto，以使表标题（th）的内容左对齐，并将表的width设置为100％。这会将第三个列延伸到页面的右边框。

要强制第三列的内容不超过170像素，您可以在第三列的规则中添加padding-right: calc(100% - 500px);：

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>

Answer 2

我会考虑使最后一列始终填充剩余空间，并在其中使用填充来强制内容具有固定的宽度，因为它不会溢出填充。

如果要获得准确的结果，只需注意计算：

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),
table tr td:nth-child(3){
  width: 100%;
  min-width:170px;
  /*2x2px + 1px is for the default border-spacing*/
  padding-right:calc(100% - 150px - 180px - 170px - (2*2px + 1px)); 
}

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;
}

<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 with very long word here</td>
        <td>Content 3 2</td>
        <td>Content 3 3 with very long word here</td>
      </tr>
    </tbody>
  </table>
</div>

具有不同值的相同想法：

table {
  border-collapse: collapse;
}

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

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

table thead th:nth-child(3),
table tr td:nth-child(3){
  width: calc(100% - 150px - 180px - 2*2px);
  min-width:170px;
  /*3x2px + 1px is for the default border-spacing*/
  padding-right:calc(100% - 150px - 180px - 170px - (2*2px + 1px)); 
}

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;
}

<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 with very long word here</td>
        <td>Content 3 2</td>
        <td>Content 3 3 with very long word here</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

我们选择的解决方案可能是最简单的方法：添加额外的空列-由于它没有任何特定的宽度，它将拉伸并扩展以填充剩余的空间-...将aria-ignore="true"添加到该列中的单元格中。

仍然有些 hack ，但是在Chrome（使用VoiceOver和ChromeVox），Firefox（使用NVDA）和Internet Explorer 11（使用NVDA和JAWS）中进行测试之后，所有屏幕阅读器都忽略了这一点单元格（用户无法使用键盘导航至该单元格）以至于他们甚至不计入列数（读者将看到“进入/退出具有四行三列的表”）。

代码如下：

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; }

table {
  width: 100%;
  table-layout: fixed;
}

<div>
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
        <th aria-hidden="true"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1 1</td>
        <td>Content 1 2</td>
        <td>Content 1 3</td>
        <td aria-hidden="true"></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>
        <td aria-hidden="true"></td>
      </tr>
      <tr>
        <td>Content 3 1</td>
        <td>Content 3 2</td>
        <td>Content 3 3</td>
        <td aria-hidden="true"></td>
      </tr>
    </tbody>
  </table>
</div>

即使列没有

3 个答案: