带有粘性标题和可调整大小的列的表，无需使用JQuery

时间：2019-01-04 18:48:44

标签： javascript html css

我见过的所有制作带有粘性标头和可调整大小的列的表的解决方案似乎都在使用Jquery。我只想在可能的情况下使用CSS做一个简单的旧解决方案。如果无法仅使用CSS，请使用CSS + Javascript，但不能使用JQuery。

我发现了针对粘性标头的单独解决方案，为可调整大小的列找到了单独的解决方案，但是没有针对这两者的完整解决方案。有人可以帮忙吗？ 我的尝试表tbody中唯一缺少的是display:block，滚动条才能正常工作，但这会使其他一切混乱。 我的尝试：

        table{ 
        	display:block;
        	background-color:cyan;
        	height:300px !important; 
        }
        th, td {
        	min-width: 25px;
        	resize: horizontal;
        	overflow: auto;
        } 
             
        tbody { 
        	height: 30px !important;
        	background-color:green;
        	width: 100%;
        	font-size: 1.45vmin;
        	overflow-y: scroll; 
        }
        	<div style="height:30px;background-color:red;">
            <table>
            <thead>
            <tr><td>header1</td><td>header2</td><td>header3</td><td>header4</td><td>header5</td></tr>
            </thead>
            <tbody>
        	<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	
        	</tbody>
            </table>
        	</div>

4 个答案:

答案 0 :(得分：13)

这是使用CSS position: sticky属性和resize: horizontal的解决方案。

可调整大小的表格标题将在右下角显示一个小图标，您可以抓住它并调整其大小。 （由于Chrome中的错误，可能是so small you can barely see it ...所以仔细看。） 

<html>  

    <style>
.fixed_headers {
  border-collapse: collapse;
  width:100%;
}
.fixed_headers td,
.fixed_headers thead th {
  padding: 5px;
  text-align: left;
}
.fixed_headers thead, textarea {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  position: relative;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}

.fixed_headers thead th {
  position: sticky;
  top: 0;  /* REQUIRED: https://stackoverflow.com/a/43707215 */
  background-color: #333;
  z-index: 10;
  resize: horizontal;
  overflow: auto;
  min-width: 70px;
}
    </style>

        <div style="height: 300px;overflow: auto;">
        <table class="fixed_headers">
        <thead>
        <tr><th>header 1</th><th>header 2</th><th>header 3</th><th>header 4</th><th>header 5</th></tr>
        </thead>
        <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>

        </tbody>
        </table>
        </div> 
    </html>

答案 1 :(得分：9)

对于CSS可调整大小的列，您可以使用此技巧。滥用webkit可调整大小的textarea功能。将标题标题以只读文本区域和样式换行作为标题，只需保留调整大小的拇指即可。使用min-max-width来禁用垂直调整大小。这只是工作量证明。玩吧。

<html>  
 <style>
.fixed_headers {

  border-collapse: collapse;
}
.fixed_headers textarea {
  text-decoration: underline;
}
.fixed_headers textarea,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers textarea,
.fixed_headers td {
    min-width: 100px;
}
.fixed_headers thead, textarea {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {

  position: relative;
}
.fixed_headers tbody {

  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}

textarea {
  border: none;
  min-height: 16px;
  max-height: 16px;
}
</style>
    <div style="height: 300px;overflow: auto;">
    <table class="fixed_headers">
    <thead>
    <tr><th><textarea readonly>header 1</textarea></th><th><textarea readonly>header 2</textarea></th><th><textarea readonly>header 3</textarea></th><th><textarea readonly>header 4</textarea></th><th><textarea readonly>header 5</textarea></th></tr>
    </thead>
    <tbody>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    </tbody>
    </table>
    </div> 
</html>

演示 http://jsfiddle.net/rft8v4sp/1/

答案 2 :(得分：5)

您唯一真正需要的是标题th上的position: sticky;。 如果我理解您的问题是正确的，那么将其与您的resize: horizontal结合即可解决您的问题。

table {
  display: block;
  background-color: cyan;
  height: 200px !important;
  overflow-y: scroll;
}

thead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

th,
td {
  resize: horizontal;
  overflow: auto;
  min-width: 25px;
}

td {
  font-size: 1.45vmin;
}

tbody {
  height: 30px !important;
  background-color: green;
  width: 100%;
}
<div style="height:30px;background-color:red;">
  <table>
    <thead>
      <tr>
        <th>header1</th>
        <th>header2</th>
        <th>header3</th>
        <th>header4</th>
        <th>header5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>

    </tbody>
  </table>
</div>

答案 3 :(得分：2)

对于固定标头，我使用了markers，对于滚动，我使用了一个容器来模仿tbody的滚动（实际上是tbody进行滚动），并且避免在表或其tbody上显示块显示使其功能失调。

粘性位置比调整大小具有更多的支持，因此，使用强制调整大小属性，它是相对安全的跨浏览器。

https://caniuse.com/#search=sticky

https://caniuse.com/#search=resize

我尝试过几次编辑此帖子，以使发布的代码在SO上运行，但无济于事，所以我为您提供了一个公开的JsFiddle以供使用：https://jsfiddle.net/Erik_J/xzhpdqLo/

（@SølveTornøe，在我提交之前我还不知道你的帖子。离开了几个小时，错过了重新发布之前的刷新。所以你是第一个提供有效解决方案的人。）

position: sticky
相关问题
最新问题