小编Max*_*nna的帖子

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

我见过的所有解决方案都是使用粘性标题和可调整大小的列创建一个表似乎是在使用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; 
        }

Run Code Online (Sandbox Code Playgroud)

        	<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> …

Run Code Online (Sandbox Code Playgroud)

html javascript css

Max*_*nna

2019 01-11

13
推荐指数

3
解决办法

952
查看次数