logo标签列表

在HTML的表格中为第一列添加水平滚动条

htmlcss
4
我有一个表格，其中有四列，第一列是一个嵌套结构，可能有(n)个嵌套和较长的文本长度。我想为表格的第一列添加水平滚动条，以便我可以看到嵌套结构。
我尝试了下面的代码，但无法实现仅对表格的第一列添加水平滚动条。
我需要一个带有仅针对第一列名称的水平滚动条的表格。我已添加了一个样本代码，我已经尝试过了： 

.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid grey;
}

.wrapper {
  overflow-x: scroll;
  overflow-y: visible;
  padding-bottom: 1px;
  width: 700px;
}

td, th {
  border: 1px solid grey;
}

.indent {
  display: inline-block;
  width: 35px;
  height: 10px;
}

.table tr th:first-child,
.table tr td:first-child {
  width: 400px;
}
<!DOCTYPE html>
<html>
<head>
  <body>
    <div class='wrapper'>
      <table class="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Level 1</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span class="indent"></span>
              <span> Level 1.1 </span>
            </td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span class="indent"> </span>
              <span class="indent"> </span>
              <span>Sub level 1.1.2</span>
            </td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span class="indent"> </span>
              <span class="indent"> </span>
              <span class="indent"> </span>
              <span> Sub Level 1.2.3</span></td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span>Level 2 </span></td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span class="indent"> </span>
              <span>Level 2.1 </span></td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span class="indent"> </span>
              <span class="indent"> </span>
              <span>Level 2.1.2 </span></td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span class="indent"> </span>
              <span class="indent"> </span>
              <span class="indent"> </span>
              <span>Level 2.1.3 </span></td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span class="indent"></span>
              <span class="indent"></span>
              <span class="indent"></span>
              <span class="indent"></span>
              <span>Level 2.1.4 </span>
            </td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

3个回答
1
你可以通过在想要有滚动条的单元格中放置一个div并应用以下样式来实现这一点：
tbody tr:first-child td:first-child div {
  width: 100%;
  overflow-x: scroll;
}

这里有一个 Codepen，包含完整的代码：https://codepen.io/anon/pen/ewmVeR

这会为单个单元格添加滚动条，但我需要在最后为整列添加滚动条。 - praveech
1
你可以在HTML中尝试使用colgroup标签。
<colgroup>
<col class="column_extend">
</colgroup>

CSS（层叠样式表）。
.column_extend {
  background-color: yellow;
  width: 150px;
  overflow-x: scroll;
  white-space: nowrap;
}

这里有一个Codepen，包含完整的代码: https://codepen.io/vignesh_ammasi/live/orgqBK

1
请尝试这个替代方案： 

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.row-on-scroll {
  width: 100%;
  overflow: scroll;
  position: absolute;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<!DOCTYPE html>
<html>
<body>
  <h2>HTML Table</h2>
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr class="row-on-scroll">
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>
</body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接