可固定列的可滚动表，固定列大小相等
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了可固定列的可滚动表，固定列大小相等相关的知识，希望对你有一定的参考价值。
我有一个第一列固定的表，所以当下一列滚动时，第一列项将始终显示，现在问题是第一列宽度有固定值，同样适用于左边距，我们如何制作流体宽度而不是固定宽度，以便根据列调整大小？
.table-main
border: none;
border-right: solid 1px rgb(75, 90, 102);
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
.table-main thead th
background-color: rgb(203, 220, 233);
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
.table-main tbody td
border-bottom: solid 1px rgb(75, 90, 102);
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
.table
position: relative;
.table-scroll
margin-left: 131px; /*HOW TO HAVE THIS in Eqaul SIZE??*/
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 500px;
.table-main .fix-col
border-left: solid 1px rgb(75, 90, 102);
border-right: solid 1px rgb(75, 90, 102);
left: 0;
position: absolute;
top: auto;
width: 110px; /*HOW TO HAVE THIS in Eqaul SIZE??*/
<div class="table">
<div class="table-scroll">
<table class="table-main">
<thead>
<tr>
<th class="fix-col">Name</th>
<th>Designation</th>
<th>Experience</th>
<th>Technology</th>
<th>Company</th>
<th>Location</th>
<th>Contact No.</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>html,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
</tbody>
</table>
</div>
</div> 答案
如何使用javascript计算和设置固定列（.fix-col）的宽度和容器div（.table-scroll）的左边距？
var columns = document.querySelectorAll('.fix-col');
var maxWidth = 0;
/* Loop through columns to get the widest one */
for (var i = 0; i < columns.length; i++)
/* Get only the width, without any paddings */
var w = parseFloat(window.getComputedStyle(columns[i]).getPropertyValue('width'));
if (w > maxWidth)
maxWidth = w;
/* Second loop to set the width */
for (var i = 0; i < columns.length; i++)
columns[i].style.width = maxWidth + 'px';
/* And finally update the margin of the wrapping div */
var paddingPlusBorder = 21;
document.querySelector('.table-scroll').style.marginLeft = maxWidth + paddingPlusBorder + 'px';.table-main
border: none;
border-right: solid 1px rgb(75, 90, 102);
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
.table-main thead th
background-color: rgb(203, 220, 233);
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
.table-main tbody td
border-bottom: solid 1px rgb(75, 90, 102);
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
.table
position: relative;
.table-scroll
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 500px;
.table-main .fix-col
border-left: solid 1px rgb(75, 90, 102);
border-right: solid 1px rgb(75, 90, 102);
left: 0;
position: absolute;
top: auto;
<div class="table">
<div class="table-scroll">
<table class="table-main" id="my-table">
<thead>
<tr>
<th class="fix-col">Name</th>
<th>Designation</th>
<th>Experience</th>
<th>Technology</th>
<th>Company</th>
<th>Location</th>
<th>Contact No.</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fix-col">Some very long name</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">LooooooooooongNameeee</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
</tbody>
</table>
</div>
</div>另一答案
你可以使用position: sticky Sticky Element来锚定离开固定列：
.fix-col
position: sticky;
position: -webkit-sticky;
background-color: white; // <-- By default it's transparent
<table>
<tr>
<th class="fix-col">Name</th>
请参阅应用于您的代码段的代码：
.table-main
border: none;
border-right: solid 1px rgb(75, 90, 102);
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
.table-main thead th
background-color: rgb(203, 220, 233);
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
.table-main tbody td
border-bottom: solid 1px rgb(75, 90, 102);
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
.table-scroll
overflow-x: scroll;
width: 500px;
.fix-col
position: sticky;
position: -webkit-sticky;
background-color: white;
left: 0;
margin-left: 1em;
<div class="table">
<div class="table-scroll">
<table class="table-main">
<thead>
<tr>
<th class="fix-col">Name</th>
<th>Designation</th>
<th>Experience</th>
<th>Technology</th>
<th>Company</th>
<th>Location</th>
<th>Contact No.</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">John</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
以上是关于可固定列的可滚动表，固定列大小相等的主要内容，如果未能解决你的问题，请参考以下文章