如何使列填充可用空间而不导致表格溢出？

问题描述 投票：0回答：1

我正在尝试制作一个响应式表格，其中：

  1. 第 1-3 列和第 5 列将始终自动调整大小以适合其内容。
  2. 第 4 列将占据所有剩余的水平空间。
  3. 第 4 列将有 
    overflow-hidden
    和 
    text-overflow: ellipsis
    。
  4. 表格宽度永远不会超过父元素的宽度。

我创建了以下 MCVE 来演示：

.container {
  max-width: 100%;
  overflow: hidden;
}

table {
  width: 100%;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  max-width: fit-content;
  width: fit-content;
  white-space: nowrap;
  overflow: hidden;
}

td:nth-child(4) {
  max-width: 100px;
  text-overflow: ellipsis;
}
<!DOCTYPE html>
<html>

<body>
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>User</th>
          <th>Type</th>
          <th>Description</th>
          <th>Previous</th>
          <th>Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>KA00000 Michael Smith</td>
          <td>COUNTER_CHANGE</td>
          <td>None</td>
          <td>5</td>
          <td>07-25-2024</td>
        </tr>
        <tr>
          <td>KA00000 Michael Smith</td>
          <td>COUNTER_CHANGE</td>
          <td>None</td>
          <td>8</td>
          <td>07-25-2024</td>
        </tr>
        <tr>
          <td>KA00000 Michael Smith</td>
          <td>CONTENT_CHANGE</td>
          <td>None</td>
          <td>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies arcu sed dictum eleifend. Nam laoreet eros ante, ut vestibulum magna dignissim eu. Aenean euismod magna eget eros ornare ultricies. In ornare urna nulla, vitae ultricies nulla suscipit
            non. Aliquam feugiat felis ut ipsum tristique viverra id a est. Suspendisse ultrices molestie turpis, at malesuada turpis mattis nec. In hac habitasse platea dictumst. Praesent at nibh tellus.</td>
          <td>07-25-2024</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

此示例的问题在于，它对第四列使用固定宽度 (

100px
)，从而使其 1) 不响应，2) 仅与特定最小宽度的父元素兼容。

有没有一种方法可以使列响应，以便它始终填充剩余空间而不会导致表格溢出？

html css layout html-table responsive-design
1个回答
0
投票

ohhh 制作一个响应式表格，其中第 1-3 列和第 5 列自动调整大小以适合其内容，第 4 列占用剩余的水平空间

overflow: hidden;
text-overflow: ellipsis;

这样你就可以使用 CSS flexbox 属性

.container {
  max-width: 100%;
  overflow: hidden;
}

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

th, td {
  border: 1px solid black;
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
}

th, td:not(:nth-child(4)) {
  max-width: fit-content;
  width: fit-content;
}

td:nth-child(4) {
  flex: 1;
  text-overflow: ellipsis;
}

.table-row {
  display: flex;
  width: 100%;
}

.table-cell {
  display: inline-flex;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="container">
    <table>
      <thead>
        <tr class="table-row">
          <th class="table-cell">User</th>
          <th class="table-cell">Type</th>
          <th class="table-cell">Description</th>
          <th class="table-cell">Previous</th>
          <th class="table-cell">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr class="table-row">
          <td class="table-cell">KA00000 Michael Smith</td>
          <td class="table-cell">COUNTER_CHANGE</td>
          <td class="table-cell">None</td>
          <td class="table-cell">5</td>
          <td class="table-cell">07-25-2024</td>
        </tr>
        <tr class="table-row">
          <td class="table-cell">KA00000 Michael Smith</td>
          <td class="table-cell">COUNTER_CHANGE</td>
          <td class="table-cell">None</td>
          <td class="table-cell">8</td>
          <td class="table-cell">07-25-2024</td>
        </tr>
        <tr class="table-row">
          <td class="table-cell">KA00000 Michael Smith</td>
          <td class="table-cell">CONTENT_CHANGE</td>
          <td class="table-cell">None</td>
          <td class="table-cell">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies arcu sed dictum eleifend. Nam laoreet eros ante, ut vestibulum magna dignissim eu. Aenean euismod magna eget eros ornare ultricies. In ornare urna nulla, vitae ultricies nulla suscipit non. Aliquam feugiat felis ut ipsum tristique viverra id a est. Suspendisse ultrices molestie turpis, at malesuada turpis mattis nec. In hac habitasse platea dictumst. Praesent at nibh tellus.
          </td>
          <td class="table-cell">07-25-2024</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

容器class确保表格不超过父元素宽度，表格的宽度：100%占据所有可用的水平空间。 第 th 和 td elements 有

white-space: nowrap;
overflow: hidden;

为了防止溢出并确保文本溢出，第四列（带有flex：1）占用剩余空间。行上的 display: flex 和单元格上的 inline-flex 允许灵活调整大小。

这样可以确保表格保持响应，并且第四列动态调整以填充剩余空间，同时遵守溢出和文本溢出规则

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.