如何修复左列和右列以及中心部分水平滚动？
我有一个表，我必须设置左列，右列将被固定，并且只能水平滚动中心内容。我尝试了一些代码，但它没有正常工作。左列和右列显示已固定但无法正常工作。我在这里更新了我的代码：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
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>
3 个答案:
答案 0 :(得分：1)
试试吧。
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>
答案 1 :(得分：0)
你需要修复的left-div和right-div以及可以水平滚动的中心表。
你可以使用这个jquery库来制作你需要的那种UI - https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
它提供了修复左列/右列的设置 -
- fixedColumns.rightColumns
- fixedColumns.leftColumns
答案 2 :(得分：0)
这个例子可以满足您的需求吗？
＆＃13;
＆＃13;
＆＃13;
＆＃13;
table {
border-collapse:separate; border-top: 3px solid grey; }
td {
margin:0;
border:3px solid grey;
border-top-width:0px;
white-space:nowrap;
}
.wrap {
position: relative;
width: 100%;
}
.inner {
position: absolute;
top: 0;
left: 80px;
right: 80px;
overflow: auto;
}
.headcol, .headcol_right {
position:fixed;
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 class="wrap">
<div class="inner">
<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>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？