列位置固定的表格，不设置 td 和 th 的高度和宽度

【问题标题】：Table with fixed position of columns without setting height and width of td and th列位置固定的表格，不设置 td 和 th 的高度和宽度
【发布时间】：2020-02-03 23:28:10
【问题描述】：

我有一个固定前三列的表。我的前三列是固定的。我想要的是其余列应该根据它们的内容自动计算它们的height 和width。

所以我的 CSS 看起来像这样：

.outer {
    position:relative;
    background-color: hotpink;
}
.inner {
    overflow-x:scroll;
    overflow-y: visible;
    width: calc(100% - 1500px);
    margin-left: 18em;
    background-color: greenyellow;
}

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

td, th {
    vertical-align: top;
    border-top: 1px solid #ccc;
    padding: 0.8em;
    width: 150px;
    height: 42px;
    word-break: break-all;
}

.col1 {
    position:absolute;
    left: 0em;
    width: 6em;
}

.col2 {
    position:absolute;
    left: 6em;
    width: 6em;
 }

.col3 {
    position:absolute;
    left: 12em;
    width: 6em;
}

.emptyrow {
    position:absolute;
    left: 0em;
    width: 18em;
}

这是表格的 HTML：

<div class="outer">
    <div class="inner">
      <table>
        <thead>
          <tr>
            <th class="col1">Header 1</th>
            <th class="col2">Header 2</th>
            <th class="col3">Header 3</th>
            <th>Header 4</th>
            <th>Header 5</th>
            <th>Header 6</th>
            <th>Header 7</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="emptyrow">This column should have value.</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td class="col1">col 1 - B</td>
            <td class="col2">col 2 - B</td>
            <td class="col3">col 3 - B</td>
            <td>col 4 - B</td>
            <td>col 5 - B</td>
            <td>col 6 - B</td>
            <td>col 7 - B</td>

          </tr>
          <tr>
            <td class="col1">col 1 - C</td>
            <td class="col2">col 2 - C</td>
            <td class="col3">col 3 - C</td>
            <td>col 4 - C</td>
            <td>col 5 - C</td>
            <td>col 6 - C</td>
            <td>col 7 - C</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

是否可以避免在td、th 中设置宽度和高度？

我的意思是避免height 和width 的硬编码值：

td, th {
  ...
  width:6em;
  height: 4em;
}

是否可以只使用没有 JavaScript 的纯 CSS？如果无法使用此解决方案实施，那么看到另一种方法真的很棒。

要求：

1. 某些滚动列可以为空
2. 应该有滚动条从“标题 4”滚动列
3. 标题 1-3 应始终保持在同一位置
4. 所有列中的Padding 应为0.8em
5. Width 和 Height 的 td、th 不应被硬编码。它们应该符合内容。
6. border-top: 1px solid #ccc;这个属性应该保留
7. 悬停行突出显示

希望看到的图像：

【问题讨论】：

• 你的表结构不对，dummies.com/web-design-development/site-development/…不要重复，是表头
• @Grumpy 如果必须在列位置放置标题怎么办？
• 禁止。您可以这样做，但 html 将不起作用#easyasthat 否则您需要重新考虑您的解决方案。
• 如果您上传一张显示所需表格外观的图片，将会非常有帮助。我不完全确定你想要实现什么。
• @liqSTAR - 禁止什么？ <th> 沿列的元素？这正是scope=row 的意义所在。