调整 HTML 表格的大小，强制所有列保持在视图中

Question

我正在寻找一种简单的解决方案，让表格能够水平收缩，同时保持所有列都在视图中。随着列的缩小，其中的内容应该可以水平滚动。

示例问题：

http://codepen.io/kirkouimet/pen/jybbxK

假设和目标：

• 我们不知道会有多少列
• 列将始终保持在一行（CSS 空白：nowrap）
• 理想的解决方案不涉及 JavaScript，只涉及 CSS
• 如果表格内的文本被省略了 (...)，然后当您将鼠标悬停在它上面时，它会展开并且您可以水平滚动它会很棒

Codepen 链接中的代码：

HTML

<table>
    <thead>
        <th>First First First</th>
        <th>Second Second Second</th>
        <th>Third Third Third</th>
        <th>Fourth Fourth Fourth</th>
    </thead>
    <tr>
        <td>First First First</td>
        <td>Second Second Second</td>
        <td>Third Third Third</td>
        <td>Fourth Fourth Fourth</td>
    </tr>
    <tr>
        <td>First First First</td>
        <td>Second Second Second</td>
        <td>Third Third Third</td>
        <td>Fourth Fourth Fourth</td>
    </tr>
    <tr>
        <td>First First First</td>
        <td>Second Second Second</td>
        <td>Third Third Third</td>
        <td>Fourth Fourth Fourth</td>
    </tr>
</table>

CSS

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

th, td {
    border: 1px solid #ccc;
    white-space: nowrap;
}

Answer 1

以下 CSS 更改将：

• 将每个单元格中的文本保持在一行
• 当单元格的内容比单元格宽时显示省略号
• 悬停时，省略号将消失，内容变为可滚动

重要的 CSS 属性是：

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

th, td {
  white-space: nowrap;
  overflow-x: scroll;
  text-overflow: ellipsis;
}

th:hover,
td:hover {
  text-overflow: clip;
}

这是一个示例，尽管 SO 的布局由于宽度的原因没有展示滚动功能。有关工作示例，请参阅此Codepen 演示并调整屏幕大小，直到表格单元格变得太窄而无法显示内容。

table {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
th,
td {
  border: 1px solid #ccc;
  white-space: nowrap;
  overflow-x: scroll;
  text-overflow: ellipsis;
}
th:hover,
td:hover {
  text-overflow: clip;
}

<table>
  <thead>
    <th>First First First First First</th>
    <th>Second Second Second Second Second</th>
    <th>Third Third Third Third Third</th>
    <th>Fourth Fourth Fourth Fourth Fourth</th>
  </thead>
  <tr>
    <td>First First First First</td>
    <td>Second Second Second Second</td>
    <td>Third Third Third Third Third</td>
    <td>Fourth Fourth Fourth</td>
  </tr>
  <tr>
    <td>First First First First</td>
    <td>Second Second Second Second</td>
    <td>Third Third Third Third Third</td>
    <td>Fourth Fourth Fourth</td>
  </tr>
  <tr>
    <td>First First First First</td>
    <td>Second Second Second Second</td>
    <td>Third Third Third Third Third</td>
    <td>Fourth Fourth Fourth</td>
  </tr>
</table>

Answer 2

更新

在带有红色文本的单元格中添加了省略号。单击它以阅读更多内容，然后再次单击它以收回。

对于缩回省略号，我使用了 2 :targets。

可滚动，我错过了第一次阅读，好吧，这更现实。为四列设计，在给定约束的情况下期望大量列是荒谬的。如果我有更多时间，我会添加省略号，但现在，只需要缩小字体即可。通过在<td> 上使用overflow:scroll/auto 并在每个<td> 内附加<div> 来完成滚动水平单元格

相关 CSS

table {
  width: 98vw;
  height: auto;
  min-height: 200px;
  table-layout: fixed;
}
th,
td {
  font-size: .4em;
  max-width:19%;
  overflow-y:hidden;
  overflow-x:scroll;
}

片段

table {
  border-collapse: collapse;
  width: 96vw;
  height: auto;
  min-height: 200px;
  table-layout: fixed;
  border: 1px solid #ccc;
}
th,
td {
  border: 1px solid #ccc;
  white-space: nowrap;
  font-size: .4em;
  min-width: 19%;
}
td {
  overflow-x: scroll;
  overflow-y: hidden;
}
td div {
  min-height: 30px;
}
.ell {
  display: block;
  position: relative;
  outline: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  width: 100%;
  color: red;
}
.ell::after {
  content: '&#hellip;';
  color: transparent;
  padding: 5px 0 5px 5px;
}
#ex1:target {
  min-width: 250ch;
  transition: all 1s;
  text-overflow: visible;
  overflow-x: visible;
  position: relative;
  z-index: 1;
  display: block;
  border-bottom: 0 none transparent;
}
a {
  display: block;
  height: 10px;
  width: 100%;
}
.in {
  display: none;
}
#ex1:target .ex {
  display: none;
}
#ex1:target .in {
  display: block;
  height: 30px;
}

<table>
  <thead>
    <th>First First First</th>
    <th>Second Second Second</th>
    <th>Third Third Third</th>
    <th>Fourth Fourth Fourth</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>First First First</div>
      </td>
      <td>
        <div>Second Second Second</div>
      </td>
      <td>
        <div>START Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
          Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
          Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
          Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
          Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
          Third Third Third Third Third Third Third Third Third Third Third Third END</div>
      </td>
      <td>
        <div>Fourth Fourth Fourth</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>First First First</div>
      </td>
      <td>
        <div>START Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second
          Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second
          Second Second Second Second Second Second END</div>
      </td>
      <td>
        <div>Third Third Third</div>
      </td>
      <td>
        <div>Fourth Fourth Fourth</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>First First First</div>
      </td>

      <td id='ex1'>
        <div class='ell'>
          <a href='#ex1' class='ex'></a>
          <a href='#in1' class='in'></a>
          Second Second SecondSecond Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second
        </div>
      </td>
      <td>
        <div>Third Third Third</div>
      </td>
      <td>
        <div>
          <p>Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth</p>
        </div>
      </td>

    </tr>
  </tbody>
</table>