时间戳

首页 > 解决方案 > 具有水平滚动和固定单元格宽度的 html 表格

html - 具有水平滚动和固定单元格宽度的 html 表格

问题描述

任何人都可以帮助我使用具有水平滚动和固定单元格宽度的 html 表格吗？

我可以制作一个水平滚动的表格，见下文，但我无法调整此表格中的单元格宽度。有什么建议吗？谢谢。

顺便说一句，如果有帮助，我正在使用引导程序 4。

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th,
td {
  text-align: left;
  padding: 8px;
}
<div style="overflow-x:auto;">
  <table>
    <tr>
      <td>Test</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
    </tr>
  </table>
</div>

标签： htmlcssbootstrap-4

解决方案

用于table-layout:fixed;您的餐桌。

.MainDiv {
  overflow: auto;
  border: 1px solid red;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}

.MainDiv table td {
  text-align: left;
  padding: 8px;
  width: 200px;
  border: 1px solid blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="MainDiv">
  <table>
    <tr>
      <td>Test</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
    </tr>
  </table>
</div>

推荐阅读