Question

我有一个有四列的表，其中第一列是一个嵌套结构，可能有（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>

Answer 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>

Answer 2

您可以通过将div放入要具有滚动条的单元格并应用以下样式来实现此目的：

tbody tr:first-child td:first-child div {
  width: 100%;
  overflow-x: scroll;
}

以下是带有完整代码的Codepen：https://codepen.io/anon/pen/ewmVeR

Answer 3

您可以尝试使用HTML的colgroup标记

HTML

<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

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

3 个答案: