水平滚动的 HTML 表格（固定四列）答案

【问题标题】：HTML table with horizontal scrolling (four columns fixed)水平滚动的 HTML 表格（固定四列）
【发布时间】：2017-01-05 22:03:03
【问题描述】：

我一直在努力创建一个表，其中前四列是固定的，而其余列是水平滚动的。我找到了这个例子first column fixed

它的第一列是固定的。我对 CSS 很陌生，无法扩展以固定前四列。任何人都可以帮忙吗？抱歉，应该很简单，我做不到。

【问题讨论】：

提供您自己的代码以及您迄今为止尝试过的内容以获得有效的帮助:)
我试过用两张桌子。一个漂浮在另一个的左侧！因为它现在非常对齐我搜索了一个单表解决方案

标签： css html-table

【解决方案1】：

CSS：

table {
  table-layout: fixed; 
  width: 100%;
  *margin-left: -100px;/*ie7*/
}
td, th {
  vertical-align: top;
  border-top: 1px solid #ccc;
  padding:10px;
  width:100px;
}
.col1{
  position:absolute;
  *position: relative; /*ie7*/
  left:0; 
  width:100px;
}
.col2{
  position:absolute;
  *position: relative; /*ie7*/
  left:100px; 
  width:100px;
}
.col3{
  position:absolute;
  *position: relative; /*ie7*/
  left:200px; 
  width:100px;
}
.col4{
  position:absolute;
  *position: relative; /*ie7*/
  left:300px; 
  width:100px;
}
.outer {position:relative}
.inner {
  overflow-x:scroll;
  overflow-y:visible;
  width:500px; 
  margin-left:400px;
}

HTML：

<div class="outer">
  <div class="inner">
    <table>
        <tr>
          <th class="col1">Header A</th>
           <th class="col2">Header A</th>
             <th class="col3">Header A</th>
                <th class="col4">Header A</th>

          <td>col 2 - A (WITH LONGER CONTENT)</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
           <td>col 6 - B</td>
          <td>col 7 - B</td>
        </tr>
        <tr>
           <th class="col1">Header B</th>
            <th class="col2">Header B</th>
              <th class="col3">Header B</th>
                <th class="col4">Header B</th>

          <td>col 2 - B</td>
          <td>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>
           <th class="col1">Header C</th>
            <th class="col2">Header C</th>
               <th class="col3">Header C</th>
                <th class="col4">Header C</th>

          <td>col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
           <td>col 6 - B</td>
          <td>col 7 - B</td>
        </tr>
    </table>
  </div>
</div>

https://jsfiddle.net/h75zn59o/

位置：绝对；是导致第一个标题列被修复的原因。使用原始 CSS 时，它只是应用于“th”，但使用类（在本例中为 col1、col2 等）我们可以将不同的固定位置分配给不同的列。因为列是 100px 宽，所以后面的每一列都被定位在另一个 100px 左边所以，第一个是 0px，然后是 col2 的 100px，等等）以避免与前一列重叠。

【讨论】：

【解决方案2】：

为你想要滚动的td标签分配一些类并添加overflow-x:scroll

【讨论】：

我用一个 div 包裹了所有的 td 标签，其中包含一个名为“test”的类。它不起作用！如果我给每个 tds 加上一个测试标签，每个 tds 都会滚动！！还是不行。