表格水平和垂直滚动与固定标题

时间：2016-09-29 03:07:24

标签： javascript css ruby-on-rails ruby scroll

我在rails工作，我有一张桌子，想要添加带有固定标题的水平和垂直滚动，详细信息如下：

  • 表有固定宽度和高
  • 表可以水平和垂直滚动
  • 标题是第一行，最后一行和第一列
  • 始终在
    • 上方看到这些标题
  • 水平滚动时，只修复第一列
  • 垂直滚动时，第一行和最后一行固定

这是my currenty code：

body { 
  font:16px Calibri;
}
table { 
  border-collapse:separate; 
  border-top: 3px solid orange; 
}
td {
  margin:0;
  border:1px solid grey; 
  border-top-width:0px; 
  white-space:nowrap;
}
div.second { 
  width: 600px; 
  overflow-x:scroll;  
  overflow-y:visible;
  margin-left:5em; 
  padding-bottom:1px;
  height: auto;
}
div.first {
  width: auto;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 150px;           
  padding-bottom: 1px;
  position: absolute;
  left:0;
  top:auto;
}
.headcol {
  position: absolute; 
  width:5em; 
  left:0;
  top:auto;
  border-right: 0px none black; 
  border-top-width:3px; /*only relevant for first row*/
  margin-top:-3px; /*compensate for top border*/
  background:grey;
}
.headrow {
  position: absolute; 
  width:100px; 
  left: 5em;
}
.long { 
  background:yellow;
}
<div id="scroll-table">
  <div class="first">
    <div class="second">
      <table>
        <thead>
          <tr>
            <td class="headcol">1 - 1</td>
            <div class="headrow">
              <td>C1</td>
              <td>C2</td>
              <td>C3</td>
              <td>C4</td>
              <td>C5</td>
              <td>C6</td>
              <td>C7</td>
              <td>C8</td>
            </div>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td class="headcol">1</td>
            <div class="row-content">
              <td class="long">QWERTYUI</td>
              <td class="long">OPASDFGH</td>
              <td class="long">TYUIOPAS</td>
              <td class="long">UIOPASDF</td>
              <td class="long">QWERTYUI</td>
              <td class="long">OPASDFGH</td>
              <td class="long">TYUIOPAS</td>
              <td class="long">UIOPASDF</td>
            </div>
          </tr>
          <tr>
            <td class="headcol">1</td>
            <div class="row-content">
              <td class="long">TYUIOPAS</td>
              <td class="long">WERTYUOP</td>
              <td class="long">QWEIOPAS</td>
              <td class="long">QWEFGHJK</td>
              <td class="long">QWERTYUI</td>
              <td class="long">OPASDFGH</td>
              <td class="long">TYUIOPAS</td>
              <td class="long">UIOPASDF</td>
            </div>
          </tr>
          <tr>
            <td class="headcol">1</td>
            <div class="row-content">
              <td class="long">TYUIOPAS</td>
              <td class="long">WERTYUOP</td>
              <td class="long">QWEIOPAS</td>
              <td class="long">QWEFGHJK</td>
              <td class="long">QWERTYUI</td>
              <td class="long">OPASDFGH</td>
              <td class="long">TYUIOPAS</td>
              <td class="long">UIOPASDF</td>
            </div>
          </tr>
          <tr>
            <td class="headcol">1</td>
            <div class="row-content">
              <td class="long">TYUIOPAS</td>
              <td class="long">WERTYUOP</td>
              <td class="long">QWEIOPAS</td>
              <td class="long">QWEFGHJK</td>
              <td class="long">QWERTYUI</td>
              <td class="long">OPASDFGH</td>
              <td class="long">TYUIOPAS</td>
              <td class="long">UIOPASDF</td>
            </div>
          </tr><tr>
          <td class="headcol">1</td>
          <div class="row-content">
            <td class="long">TYUIOPAS</td>
            <td class="long">WERTYUOP</td>
            <td class="long">QWEIOPAS</td>
            <td class="long">QWEFGHJK</td>
            <td class="long">QWERTYUI</td>
            <td class="long">OPASDFGH</td>
            <td class="long">TYUIOPAS</td>
            <td class="long">UIOPASDF</td>
          </div>
          </tr>
          <tr>
            <td class="headcol">1</td>
            <div class="row-content">
              <td class="long">TYUIOPAS</td>
              <td class="long">WERTYUOP</td>
              <td class="long">QWEIOPAS</td>
              <td class="long">QWEFGHJK</td>
              <td class="long">QWERTYUI</td>
              <td class="long">OPASDFGH</td>
              <td class="long">TYUIOPAS</td>
              <td class="long">UIOPASDF</td>
            </div>
          </tr><tr>
          <td class="headcol">1</td>
          <div class="row-content">
            <td class="long">TYUIOPAS</td>
            <td class="long">WERTYUOP</td>
            <td class="long">QWEIOPAS</td>
            <td class="long">QWEFGHJK</td>
            <td class="long">QWERTYUI</td>
            <td class="long">OPASDFGH</td>
            <td class="long">TYUIOPAS</td>
            <td class="long">UIOPASDF</td>
          </div>
          </tr>
          <tr>
            <td class="headcol">1</td>
            <div class="row-content">
              <td class="long">TYUIOPAS</td>
              <td class="long">WERTYUOP</td>
              <td class="long">QWEIOPAS</td>
              <td class="long">QWEFGHJK</td>
              <td class="long">QWERTYUI</td>
              <td class="long">OPASDFGH</td>
              <td class="long">TYUIOPAS</td>
              <td class="long">UIOPASDF</td>
            </div>
          </tr><tr>
          <td class="headcol">1</td>
          <div class="row-content">
            <td class="long">TYUIOPAS</td>
            <td class="long">WERTYUOP</td>
            <td class="long">QWEIOPAS</td>
            <td class="long">QWEFGHJK</td>
            <td class="long">QWERTYUI</td>
            <td class="long">OPASDFGH</td>
            <td class="long">TYUIOPAS</td>
            <td class="long">UIOPASDF</td>
          </div>
          </tr>
          <tr>
            <td class="headcol">1</td>
            <div class="row-content">
              <td class="long">TYUIOPAS</td>
              <td class="long">WERTYUOP</td>
              <td class="long">QWEIOPAS</td>
              <td class="long">QWEFGHJK</td>
              <td class="long">QWERTYUI</td>
              <td class="long">OPASDFGH</td>
              <td class="long">TYUIOPAS</td>
              <td class="long">UIOPASDF</td>
            </div>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

我认为需要使用javascript

你能帮我解决一下吗？

由于

0 个答案:

没有答案
相关问题
最新问题