Question

我希望我的表格单元格的高度固定为 62 像素，我尝试了很多解决方案，但我无法实现，下面的一个是最接近的。

我遇到的问题是表格单元格内的文本显示不正确，部分隐藏。

表格单元格的内容是动态的，我想要的行为是表格单元格的宽度增加以适应其内容，然后表格将具有水平滚动，因为表格的整体宽度将超过其包装器。

我知道 white-space: nowrap; 可以解决文本溢出问题，但我希望文本转到第二行，因为它有足够的空间 line-height of 24px * 2 < 62px < line-height of 24px * 3。因此，根据单元格最小宽度，它将有一行或两行，并且单元格的宽度将增长以适应其内容，而不会超过两行，因为三行将导致高度 > 62px

至于这个解决方案：

Have table cell grow horizontally when cell content is large

我无法使用它，因为 IE11 不支持 min-content 属性。

我该如何解决这个问题？

.container {
  width: 600px;
  overflow: scroll:
}

table {
  table-layout: fixed;
  min-width: 100%;
  overflow-x: auto;
}

tr>th:first-of-type,
tr>td:first-of-type {
  min-width: 70px;
}

table thead th {
  border-top-color: #d9deea;
  border-bottom-color: #6b7790;
  border-style: solid none solid none;
  font-weight: 700;
  padding: 24px 12px;
  font-size: 14px;
  color: #6b7790;
  line-height: 16px;
  border-width: 1px;
  min-width: 124px;
}

tbody td {
  color: #01216c;
  line-height: 24px;
  padding: 0 12px;
  height: 62px;
  font-size: 14px;
  border-width: 1px;
  border-bottom-color: #d9deea;
  border-style: none none solid none;
  overflow: hidden;
  min-width: 124px;
}

td>span {
  max-height: 62px;
  display: block;
}

<div class="container">

  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
    </tbody>
  </table>

</div>

Answer 1

我认为这对于纯 css 是不可能的。但是你可以用一个小的javascript来解决它。增加每个表格单元格的宽度，直到高度足够小。

工作示例：

var spans = document.querySelectorAll('td span');

for (i = 0; i < spans.length; i++) {
  const td_style = window.getComputedStyle(spans[i].parentNode);
  const span_style = window.getComputedStyle(spans[i]);
  const line_height = parseInt(td_style.getPropertyValue('line-height'));

  while (parseInt(span_style.getPropertyValue('height')) > line_height * 2) {
    spans[i].style.width = (parseInt(span_style.getPropertyValue('width')) + 5) + 'px';
  }
}

.container {
  width: 600px;
  overflow-x: auto;
}

table {
  min-width: 100%;
}

tr>th:first-of-type,
tr>td:first-of-type {
  min-width: 70px;
}

table thead th {
  border-top-color: #d9deea;
  border-bottom-color: #6b7790;
  border-style: solid none solid none;
  font-weight: 700;
  padding: 24px 12px;
  font-size: 14px;
  color: #6b7790;
  line-height: 16px;
  border-width: 1px;
  min-width: 124px;
}

tbody td {
  color: #01216c;
  line-height: 24px;
  padding: 0 12px;
  font-size: 14px;
  border-width: 1px;
  border-bottom-color: #d9deea;
  border-style: none none solid none;
}

td>span {
  display: block;
  max-height: 62px;
}

<div class="container">

  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum.</span></td>
      </tr>
    </tbody>
  </table>

</div>

如果您在页面中使用 jQuery，您可以将脚本简化为：

$('td span').each(function() {
  const line_height = parseInt($(this).parent().css('line-height'));
  
  while ($(this).height() > line_height * 2) {
    $(this).css('width', '+=5');
  }
});

工作示例：

$('td span').each(function() {
  const line_height = parseInt($(this).parent().css('line-height'));
  
  while ($(this).height() > line_height * 2) {
    $(this).css('width', '+=5');
  }
});

.container {
  width: 600px;
  overflow-x: auto;
}

table {
  min-width: 100%;
}

tr>th:first-of-type,
tr>td:first-of-type {
  min-width: 70px;
}

table thead th {
  border-top-color: #d9deea;
  border-bottom-color: #6b7790;
  border-style: solid none solid none;
  font-weight: 700;
  padding: 24px 12px;
  font-size: 14px;
  color: #6b7790;
  line-height: 16px;
  border-width: 1px;
  min-width: 124px;
}

tbody td {
  color: #01216c;
  line-height: 24px;
  padding: 0 12px;
  font-size: 14px;
  border-width: 1px;
  border-bottom-color: #d9deea;
  border-style: none none solid none;
}

td>span {
  display: block;
  max-height: 62px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum.</span></td>
      </tr>
    </tbody>
  </table>

</div>

Answer 2

此答案在第三个和第四个 min-width 元素上使用 td。

.container {
  width: 600px;
  overflow: scroll;
  border: solid 1px red;
}

table {
  table-layout: fixed;
}

table thead th {
  border-top-color: #d9deea;
  border-bottom-color: #6b7790;
  border-style: solid none solid none;
  font-weight: 700;
  padding: 24px 12px;
  font-size: 14px;
  color: #6b7790;
  line-height: 16px;
  border-width: 1px;
}


tbody tr td:nth-of-type(1),
tbody tr td:nth-of-type(2) {
  min-width: 100px;
}

tbody tr td:nth-of-type(3),
tbody tr td:nth-of-type(4) {
  min-width: 300px;
}

tbody td {
  color: #01216c;
  line-height: 18px;
  padding: 0 12px;
  height: 62px;
  font-size: 14px;
  border-width: 1px;
  border-bottom-color: #d9deea;
  border-style: none none solid none;
}

td>span {
  max-height: 62px;
  display: block;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
    </tbody>
  </table>

</div>

Answer 3

增加表格容器宽度。

您的表格容器的固定宽度为 600 像素，这会迫使 div 尽可能地伸展。增加这个或给每个特定的宽度将有助于更适合您的内容。

Answer 4

另一个实用、优雅且易于实现的解决方案是在表格单元格上使用 overflow-y: auto;。以下是您应该考虑这一点而不是您当前想要的行为的几个原因：

水平调整表格或表格元素的大小是次优的用户体验。根据定义，基于表格的设计应仅用于显示表格数据，并且通常应具有固定的水平尺寸和可变的垂直尺寸。
不需要任何 JS 黑魔法来解决有时向用户显示更多文本的基本问题。
我们还可以将 tds 的 line-height 调整为 20px，这样我们就可以舒适地看到 3 个文本行而不会显示滚动条。额外奖励：某些浏览器（例如 Safari）实际上具有漂亮的滚动条。

.container {
  width: 600px;
}

table {
  table-layout: fixed;
  min-width: 100%;
  overflow-x: auto;
}

tr > th:first-of-type, tr > td:first-of-type {
  min-width: 70px;
}

table thead th {
  border-top-color: #d9deea;
  border-bottom-color: #6b7790;
  border-style: solid none solid none;
  font-weight: 700;
  padding: 24px 12px;
  font-size: 14px;
  color: #6b7790;
  line-height: 16px;
  border-width: 1px;
  min-width: 124px;
}

tbody td {
  color: #01216c;
  line-height: 20px;
  padding: 0 12px;
  height: 62px;
  font-size: 14px;
  border-width: 1px;
  border-bottom-color: #d9deea;
  border-style: none none solid none;
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 124px;
}

td > span {
  max-height: 62px;
  display: block;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum.</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 5

我进行了 2 次更改 -

添加属性 overflow-y:auto 以在 td>span 的固定高度单元格上添加垂直滚动条
更改 line-height: 1rem 属性中的 tbody td 或根据您的要求进行更改。垂直空间将被移除，所需的 Y 轴滚动更少

.container {
  width: 600px;
  overflow: scroll:
}

table {
  table-layout: fixed;
  min-width: 100%;
  overflow-x: auto;
}

tr>th:first-of-type,
tr>td:first-of-type {
  min-width: 70px;
}

table thead th {
  border-top-color: #d9deea;
  border-bottom-color: #6b7790;
  border-style: solid none solid none;
  font-weight: 700;
  padding: 24px 12px;
  font-size: 14px;
  color: #6b7790;
  line-height: 16px;
  border-width: 1px;
  min-width: 124px;
}

tbody td {
  color: #01216c;
  line-height: 1rem;
  padding: 0 12px;
  height: 62px;
  font-size: 14px;
  border-width: 1px;
  border-bottom-color: #d9deea;
  border-style: none none solid none;
  overflow: hidden;
  min-width: 124px;
}

td>span {
  max-height: 62px;
  display: block;
  overflow-y:auto;
}

<div class="container">

  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
    </tbody>
  </table>

</div>

单元格内容带有溢出-x 的固定高度表

5 个答案: