Question

我有一个由许多列组成的表。在第一列中，我希望在向右滚动时修复它。

如何在CSS或Javascript中使用position:fixed;来应用，因为第一列和第二列会发生冲突？希望有人可以帮助我。

＆＃13;

#table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

#th, #td {
    border: none;
    text-align: left;
    padding: 8px;

}

tr:nth-child(even){background-color: #f2f2f2}

＆＃13;

<div style="overflow-x:auto;">
  <table id="table">
    <tr>
      <th id="th">First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td id="td">Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td id="td">Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td id="td">Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

＆＃13;

Answer 1

Your table structure should be like this

<div>
<table>
        <tr><th class="headingcol">Points</th><td class="spacing">50</td><td class="long">50</td></tr>
        <tr><th class="headingcol">Points</th><td class="spacing">50</td><td class="long">50</td></tr>
        <tr><th class="headingcol">Points</th><td class="spacing">50</td><td class="long">50</td></tr>
        <tr><th class="headingcol">Points</th><td class="spacing">50</td><td class="long">50</td></tr>
        <tr><th class="headingcol">Points</th><td class="spacing">50</td><td class="long">50</td></tr>
        <tr><th class="headingcol">Points</th><td class="spacing">50</td><td class="long">50</td></tr>
</table>
</div>

和css喜欢：

table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid grey;
}

td, th {
  margin: 0;
  border: 1px solid grey;
  white-space: nowrap;
  border-top-width: 0px;
}

div {
  width: 500px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}

.headingcol{
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

.headingcol:before {
  content: 'Row ';
}

.spacing{
  background: yellow;
  letter-spacing: 1em;
}

Answer 2

好的，这是让你前进的起点 - 我做过的事情（不确定你是否能够对表的生成方式产生约束）将你的第一列分成一个表并将其余的放入第二张桌子。每个表都包含在一个div中，该div控制着该表的显示。

https://jsfiddle.net/f2zoyd1y/1/

<强> HTML

col1            col2      word
1 cars1 gm cars1 motor mel motor mel
2 cars2 gl  cars2 prom del  prom del

<强> CSS

<div style="overflow-x:auto;">
  <div id="table1-wrapper">
      <table id="table1">
         <!-- Your first column goes in here -->
      </table>
  </div>
  <div id="table2-wrapper">
      <table id="table2">
         <!-- The rest of it goes in here -->
      </table>
  </div>
</div>

基本上是＆＃34;包装＆＃34; divs设置宽度并浮动表格，使它们并排显示。第一个表包装器设置为fixed并具有高z-index，这样当窗口变小时，第二个表将在它下面滚动。

这里的一个小皱纹是，当你缩小视口时，你的第二张桌子＆＃34;姓氏＆＃34;列将断行。此时，您需要使用媒体查询来强制使用＆＃34;名字＆＃34;也可以打破（或者将包装div设置为一个会强制换行的宽度），这样一切看起来都很好。鉴于JSfiddle的渲染部分并不是整个视口，我无法猜测需要实现的宽度。

如何在表格上固定第一列位置？

2 个答案: