带水平滚动的HTML表格(固定四列)

时间:2016-08-29 19:19:33

标签: css html-table

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

它已修复第一列。我是CSS的新手,无法扩展以修复四个第一列。任何人都可以帮忙吗?对不起,这应该很简单,我不能。

2 个答案:

答案 0 :(得分:2)

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,它只是应用于&#34; th&#34;,但是使用类(在此示例中为col1,col2等),我们可以为不同的列分配不同的固定位置。因为列的宽度是100px,所以每个后续列的位置都是另外100px左边所以,第一个是0px,然后是col2的100px等,以避免与前一列重叠。

答案 1 :(得分:1)

将一些类分配给您想要滚动的bool defaultvalue = false; chkRedundancy.Checked = _record.redundancyRecieved.HasValue; chkReducedHoursWork.Checked = _record.reducedHours.HasValue ? _record.reducedHours > 0: false; 标记,并添加overflow-x:scroll