html - CSS 表 : Scrollbar for first column and auto width for remaining column

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; 和 显示:表格单元格；

• 所有单元格的空白必须是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>