表与粘性标题和可调整大小的列，而不使用JQuery

问题描述 投票：13回答：4

我见过的所有解决方案都是使用粘性标题和可调整大小的列创建一个表似乎是在使用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>
javascript html css
4个回答
13
投票

这是使用position: sticky的CSS 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>
9
投票

对于CSS可调整大小的列，您可以使用此技巧。滥用webkit可调整大小的textarea功能。将标题标题包含在readonly textareas中，将样式标记为标题，只需留下调整大小的拇指即可。使用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>

但是z zxswい

5
投票

你唯一真正需要的是http://jsfiddle.net/rft8v4sp/1/头上的position: sticky;。如果我理解你的问题，那么结合你的th将解决你的问题。

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%;
}
2
投票

对于固定的标题，我使用了<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>，对于滚动我使用了一个容器来模仿tbody滚动（实际上，它是滚动的tbody）并且避免在表或其tbody上的块显示会使它有些功能失常。

粘性位置比调整大小有更多的支持，因此强制调整大小属性是相对安全的crossbrowser。

position: sticky

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

我尝试了几次编辑这篇文章，让发布的代码在这里运行，但无济于事，所以我让你成为一个公共的JsFiddle玩：https://caniuse.com/#search=resize

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

https://jsfiddle.net/Erik_J/xzhpdqLo/
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.