CSS表：第一列的滚动条和剩余列

Question

我是CSS的初学者。我试图创建一个表，其中第一列是固定宽度的，并且必须有一个滚动条。对于剩下的专栏，我希望他们能够在网页上均匀分布。

我可以为第一列创建滚动条，但它出现在每一行中，这不是我想要的。我仍然希望每个第一列都可以滚动，但滚动条应该只出现在最后一行的下方。

任何人都可以帮我这个吗？

#customers {
  font-size: 10px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  padding: 8px;
  overflow-x: auto;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

#customers th {
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

.col {
  width: 3%;
}

<table id="customers">
  <colgroup>
    <col width=500px>
    <col width=5% span="11">
  </colgroup>
</table>

Answer 1

这是可能的，但使用了很多技巧：

• 必须使用div display: table;和display: table-row;

display: table-cell;更改表格的方法

• 所有单元格的空格必须是nowrap;

• 在两个宏单元中划分主体;

Look like this demo ： 这里是新的html结构逻辑的摘录。

.div-cell.div-container-cell
{
  border: none;
  display: table-cell;
  padding: 0px;
}

.div-fixed-container-cell
{
  white-space: nowrap;
  max-width:200px;
  overflow-x:scroll;
}

.div-table
{
  display: table;
}

.div-row 
{
  display: table-row;
}

.div-cell
{
  display: table-cell;
  border: 2px solid #ddd;
  padding: 5px;
  white-space: nowrap;
}

<div class="div-table">
  <div class="div-container-cell div-fixed-container-cell">
    <div class="div-row">
      <div class="div-cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    </div>
    <div class="div-row">
      <div class="div-cell">Lorem ipsum ...</div>
    </div>
    <div class="div-row">
      <div class="div-cell">Lorem ipsum ...</div>
    </div>
  </div>

  <div class="div-cell div-container-cell">
    <div class="div-row">
        <div class="div-cell">A1</div>
        <div class="div-cell">B1</div>
        <div class="div-cell">C1</div>
    </div>

    <div class="div-row">
        <div class="div-cell">A2</div>
        <div class="div-cell">B2</div>
        <div class="div-cell">C2</div>
    </div>  
    <div class="div-row">
       <div class="div-cell">A3</div>
       <div class="div-cell">B3</div>
       <div class="div-cell">C3</div>
    </div>  
  </div>
</div>