修复了表格中的表格行

时间:2017-10-31 07:16:44

标签: html css html-table

我正在尝试修复<table>中第一个<table id="myHeader" class="table table-striped table-hover table-bordered table-responsive"><tbody> <tr style="position: fixed;"> <th>Sr.</th> <th>Question</th> <th class="mobiile">Your Answer</th> <th>Right Answer</th> <th>Marks</th> </tr> 的位置,但它现在看起来像这样:

enter image description here

但我想这样:

enter image description here

我试过了:

{{1}}

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
document.getElementById('theTable').addEventListener('scroll', scrollHeader);

function scrollHeader(e){
    
    var table = e.currentTarget,
        thead = table.getElementsByTagName('thead')[0];
    
    thead.scrollLeft = table.scrollLeft;
}
&#13;
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:15px;
background:#eaebec;
border:#ccc 1px solid;
border-radius:3px;
border-collapse:collapse; border-spacing: 0; 
box-shadow: 0 1px 2px #d1d1d1;
    
    display: block;
    overflow: auto;
    max-height: 200px;
    width:425px;
}
table thead {
    z-index: 1; /* put on top of other rows */
	display: block;
	position: fixed;
    
    /* make sure this header width is same as table */
    max-width: 500px;
    overflow-y: auto; /* use auto so scrollbars only appear if they need to*/
    overflow-x: hidden;
	}
thead tr td {
    background: #eaebec;
	width: 65px;
	min-width: 65px;
}
table tbody {
display: block;
padding-top: 40px;
}
table th {
padding:2px 2px 2px 2px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #ededed;
}
table tr {
text-align: center;
}
/* only using !important to override your styles below */
table td {
	margin-left: 0 !important;
    width: 65px !important;
	padding:2px 2px 2px 2px;
	border-top:0;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	
}

table tr:hover td {
background: #F7FE2E;
}
table tr, table td {
width: 65px;
min-width: 65px;
}
&#13;
<div id='container'>
		<div id='content'><h3><font color='blue'>Listcode - MP</font></h3>
	<div id='wrapper'>
		<table id="theTable"><thead><tr><td>Julian Date</td>
<td>Records</td>
<td>Sales</td>
<td>CPO</td>
<td>2006 Records</td>
<td>2006 Deals</td>

</tr></thead>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
</table></div></div></div>
&#13;
&#13;
&#13;