我有一个表格，我必须设置左列和右列将被固定，并且只水平滚动中心内容。我尝试了一些代码，但它无法正常工作。左列和右列显示已修复但无法正常工作。我在这里更新了我的代码:
table { border-collapse:separate; border-top: 3px solid grey; }
td {
margin:0;
border:3px solid grey;
border-top-width:0px;
white-space:nowrap;
}
div {
width: 600px;
overflow-x:scroll;
padding:30px;
position: relative;
margin: 0 auto;
}
.headcol, .headcol_right {
position:absolute;
width:5em;
top:auto;
border-right: 1px #solid black;
border-top-width:3px;
margin-top:-3px;
overflow:hidden;
background-color : red;
}
.headcol{
left: 0;
}
.headcol_right {
right:0;
}<div>
<table border="1">
<thead class="bg-primary">
<tr>
<th class="headcol">Sr. No</th>
<th>No</th>
<th>Date</th>
<th>Student Name</th>
<th>Standard</th>
<th class="headcol_right">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="headcol">1</td>
<td>NOV17-00002</td>
<td>09-11-2015 13:48:53</td>
<td>jkajsaskjkljlk</td>
<td>X</td>
<td class="headcol_right"><a href="">edit</a></td>
</tr>
<tr>
<td class="headcol">1</td>
<td>NOV17-00002</td>
<td>09-11-2015 13:48:53</td>
<td>jkajsaskjkljlk</td>
<td>X</td>
<td class="headcol_right"><a href="">edit</a></td>
</tr>
</tbody>
</table>
</div> 
最佳答案
试一试。
table {
border: 0;
border-spacing: 0;
border-collapse: collapse;
}
td {
margin:0;
border:3px solid grey;
border-top-width:0px;
white-space:nowrap;
display: table-cell;
}
td, th{
width: 15%;
}
.container-block {
width: 800px;
/* padding:30px;*/
position: relative;
margin: 0 auto;
}
.headcol, .headcol_right {
position: absolute;
/*width: 5em;*/
top: auto;
border-top-width: 3px;
overflow: hidden;
background-color: red;
border: 3px solid grey;
}
.headcol{
left: -45px;
}
.headcol_right {
right: 20px;
}
.table-block {
margin-left: 85px;
overflow-x: scroll;
width: 565px;
}<div class="container-block">
<div class="table-block">
<table border="1">
<thead>
<tr>
<th class="headcol">Student Name</th>
<th style="min-width: 75px;">Invoice No</th>
<th>Invoice Date</th>
<th>Standard</th>
<th>Subjects</th>
<th>Amount</th>
<th>Discount</th>
<th>Tax</th>
<th style="min-width: 110px;">Invoice Amount</th>
<th style="min-width: 118px;">Payment Method</th>
<th class="headcol_right">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="headcol"><input type="checkbox" name="name">Naren</td>
<td>00002</td>
<td>09-11-2015 13:48:53</td>
<td>X</td>
<td>maths</td>
<td>2500</td>
<td>100</td>
<td>10</td>
<td>15000</td>
<td>Cheque</td>
<td class="headcol_right"><a href="">edit</a></td>
</tr>
<tr>
<td class="headcol"><input type="checkbox" name="name">Praveen</td>
<td>00002</td>
<td>09-11-2015 13:48:53</td>
<td>X</td>
<td>maths</td>
<td>2500</td>
<td>100</td>
<td>10</td>
<td>15000</td>
<td>Cheque</td>
<td class="headcol_right"><a href="">edit</a></td>
</tr>
<tr>
<td class="headcol"><input type="checkbox" name="name">Ajeet</td>
<td>00002</td>
<td>09-11-2015 13:48:53</td>
<td>X</td>
<td>maths</td>
<td>2500</td>
<td>100</td>
<td>10</td>
<td>15000</td>
<td>Cheque</td>
<td class="headcol_right"><a href="">edit</a></td>
</tr>
<tr>
<td class="headcol"><input type="checkbox" name="name">Amit</td>
<td>00002</td>
<td>09-11-2015 13:48:53</td>
<td>X</td>
<td>maths</td>
<td>2500</td>
<td>100</td>
<td>10</td>
<td>15000</td>
<td>Cheque</td>
<td class="headcol_right"><a href="">edit</a></td>
</tr>
<tr>
<td class="headcol"><input type="checkbox" name="name">Naren</td>
<td>00002</td>
<td>09-11-2015 13:48:53</td>
<td>X</td>
<td>maths</td>
<td>2500</td>
<td>100</td>
<td>10</td>
<td>15000</td>
<td>Cheque</td>
<td class="headcol_right"><a href="">edit</a></td>
</tr>
<tr>
<td class="headcol"><input type="checkbox" name="name">Praveen</td>
<td>00002</td>
<td>09-11-2015 13:48:53</td>
<td>X</td>
<td>maths</td>
<td>2500</td>
<td>100</td>
<td>10</td>
<td>15000</td>
<td>Cheque</td>
<td class="headcol_right"><a href="">edit</a></td>
</tr>
<tr>
<td class="headcol"><input type="checkbox" name="name">Ajeet</td>
<td>00002</td>
<td>09-11-2015 13:48:53</td>
<td>X</td>
<td>maths</td>
<td>2500</td>
<td>100</td>
<td>10</td>
<td>15000</td>
<td>Cheque</td>
<td class="headcol_right"><a href="">edit</a></td>
</tr>
<tr>
<td class="headcol"><input type="checkbox" name="name">Amit</td>
<td>00002</td>
<td>09-11-2015 13:48:53</td>
<td>X</td>
<td>maths</td>
<td>2500</td>
<td>100</td>
<td>10</td>
<td>15000</td>
<td>Cheque</td>
<td class="headcol_right"><a href="">edit</a></td>
</tr>
</tbody>
</table>
</div>
</div>关于html - 如何固定左列和右列以及中间部分水平滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47216729/