表格栏宽度未调整为内容大小
我在表中添加了水平和垂直滚动条，并在垂直滚动和冻结tbody元素时冻结了线程元素，直到四列，但是如果特定的td内容，则表的列宽未调整为内容大小值很长。需要您的帮助来解决此问题。
https://codepen.io/anon/pen/varLaG
<table>
<thead>
<tr>
<th>Name</th>
<th>Town</th>
<th>County</th>
<th>Age</th>
<th>Profession</th>
<th>Anual Income</th>
<th>Matital Status</th>
<th>Children</th>
<th>Anual Income</th>
<th>Matital Status</th>
<th>Children</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>Macelsfield</td>
<td>Cheshire</td>
<td>52</td>
<td>Brewer</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Jenny Jones</td>
<td>Threlkeld</td>
<td>Cumbria</td>
<td>34</td>
<td>Shepherdess</td>
<td>£28,000</td>
<td>Single</td>
<td>0</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Peter Frampton</td>
<td>Avebury</td>
<td>Wiltshire</td>
<td>57</td>
<td>Musician</td>
<td>£124,000</td>
<td>Married</td>
<td>4</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Simon King</td>
<td>Malvern</td>
<td>Worchestershire</td>
<td>48</td>
<td>Naturalist</td>
<td>£65,000</td>
<td>Married</td>
<td>2</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Lucy Diamond</td>
<td>St Albans</td>
<td>Hertfordshire</td>
<td>67</td>
<td>Pharmasist</td>
<td>Retired</td>
<td>Married</td>
<td>3</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Austin Stevenson</td>
<td>Edinburgh</td>
<td>Lothian </td>
<td>36</td>
<td>Vigilante</td>
<td>£86,000</td>
<td>Single</td>
<td>Unknown</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Wilma Rubble</td>
<td>Bedford</td>
<td>Bedfordshire</td>
<td>43</td>
<td>Housewife</td>
<td>N/A</td>
<td>Married</td>
<td>1</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Kat Dibble</td>
<td>Manhattan</td>
<td>New York</td>
<td>55</td>
<td>Policewoman</td>
<td>$36,000</td>
<td>Single</td>
<td>1</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Henry Bolingbroke</td>
<td>Bolingbroke</td>
<td>Lincolnshire</td>
<td>45</td>
<td>Landowner</td>
<td>Lots</td>
<td>Married</td>
<td>6</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Alan Brisingamen</td>
<td>Alderley</td>
<td>Cheshire</td>
<td>352</td>
<td>Arcanist</td>
<td>A pile of gems</td>
<td>Single</td>
<td>0</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
</tbody>
/ *************** HTML的结尾***************** /
table {
position: relative;
table-layout: auto;
background-color: #aaa;
overflow: hidden;
border-collapse: collapse;
display:block;
width: 100%;
}
thead {
position: relative;
display: block;
overflow: visible;
}
thead th {
background-color: #99a;
min-width: 120px;
height: 32px;
border: 1px solid #222;
}
thead th:nth-child(1) {
position: relative;
background-color: #88b;
}
thead th:nth-child(2) {
position: relative;
background-color: #88b;
}
thead th:nth-child(3) {
position: relative;
background-color: #88b;
}
thead th:nth-child(4) {
position: relative;
background-color: #88b;
}
tbody {
position: relative;
display: block;
height: 239px;
overflow: scroll;
}
tbody td {
background-color: #bbc;
min-width: 120px;
border: 1px solid #222;
}
tbody tr td:nth-child(1) {
position: relative;
height: 40px;
background-color: #99a;
}
tbody tr td:nth-child(2) {
position: relative;
height: 40px;
background-color: #99a;
}
tbody tr td:nth-child(3) {
position: relative;
height: 40px;
background-color: #99a;
}
tbody tr td:nth-child(4) {
position: relative;
height: 40px;
background-color: #99a;
}
/ ********************** Css的结尾********************* ************* /
$(document).ready(function() {
$('tbody').scroll(function(e) {
$('thead').css("left",
-$("tbody").scrollLeft());
$('thead th:nth-
child(1)').css("left",
$("tbody").scrollLeft());
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft());
$('thead th:nth-child(2)').css("left", $("tbody").scrollLeft());
$('tbody td:nth-child(2)').css("left", $("tbody").scrollLeft());
$('thead th:nth-child(3)').css("left", $("tbody").scrollLeft());
$('tbody td:nth-child(3)').css("left", $("tbody").scrollLeft());
$('thead th:nth-child(4)').css("left", $("tbody").scrollLeft());
$('tbody td:nth-child(4)').css("left", $("tbody").scrollLeft());
});
});
2 个答案:
答案 0 :(得分：1)
$(document).ready(function() {
$('tbody').scroll(function(e) { //detect a scroll event on the tbody
/*
Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain it's relative position at the left of the table.
*/
$('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
$('thead th:nth-child(2)').css("left", $("tbody").scrollLeft()); //fix the second cell of the header
$('tbody td:nth-child(2)').css("left", $("tbody").scrollLeft()); //fix the second column of tdbody
$('thead th:nth-child(3)').css("left", $("tbody").scrollLeft()); //fix the third cell of the header
$('tbody td:nth-child(3)').css("left", $("tbody").scrollLeft()); //fix the third column of tdbody
$('thead th:nth-child(4)').css("left", $("tbody").scrollLeft()); //fix the third cell of the header
$('tbody td:nth-child(4)').css("left", $("tbody").scrollLeft()); //fix the third column of tdbody
});
});table {
position: relative;
table-layout: auto;
background-color: #aaa;
overflow: hidden;
border-collapse: collapse;
display:block;
width: 100%;
}
/*thead*/
thead {
position: relative;
display: block; /*seperates the header from the body allowing it to be positioned*/
overflow: visible;
}
thead th {
background-color: #99a;
min-width: 120px;
height: 32px;
border: 1px solid #222;
max-width:120px;
}
thead th:nth-child(1) {/*first cell in the header*/
position: relative;
background-color: #88b;
}
thead th:nth-child(2) {/*second cell in the header*/
position: relative;
background-color: #88b;
}
thead th:nth-child(3) {/*third cell in the header*/
position: relative;
background-color: #88b;
}
thead th:nth-child(4) {/*third cell in the header*/
position: relative;
background-color: #88b;
}
/*tbody*/
tbody {
position: relative;
display: block; /*seperates the tbody from the header*/
height: 239px;
overflow: scroll;
}
tbody td {
background-color: #bbc;
min-width: 120px;
border: 1px solid #222;
max-width:120px;
}
tbody tr td:nth-child(1) { /*the first cell in each tr*/
position: relative;
height: 40px;
background-color: #99a;
}
tbody tr td:nth-child(2) { /*the second cell in each tr*/
position: relative;
height: 40px;
background-color: #99a;
}
tbody tr td:nth-child(3) { /*the third cell in each tr*/
position: relative;
height: 40px;
background-color: #99a;
}
tbody tr td:nth-child(4) { /*the third cell in each tr*/
position: relative;
height: 40px;
background-color: #99a;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Town</th>
<th>County</th>
<th>Age</th>
<th>Profession</th>
<th>Anual Income</th>
<th>Matital Status</th>
<th>Children</th>
<th>Anual Income</th>
<th>Matital Status</th>
<th>Children</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>Macelsfield</td>
<td>Cheshire</td>
<td>52</td>
<td>Brewer</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Jenny Jones</td>
<td>Threlkeld</td>
<td>Cumbria</td>
<td>34</td>
<td>Shepherdess</td>
<td>£28,000</td>
<td>Single</td>
<td>0</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Peter Frampton</td>
<td>Avebury</td>
<td>Wiltshire</td>
<td>57</td>
<td>Musician</td>
<td>£124,000</td>
<td>Married</td>
<td>4</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Simon King</td>
<td>Malvern</td>
<td>Worchestershire Wor chester shire</td>
<td>48</td>
<td>Naturalist</td>
<td>£65,000</td>
<td>Married</td>
<td>2</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Lucy Diamond</td>
<td>St Albans</td>
<td>Hertfordshire</td>
<td>67</td>
<td>Pharmasist</td>
<td>Retired</td>
<td>Married</td>
<td>3</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Austin Stevenson</td>
<td>Edinburgh</td>
<td>Lothian </td>
<td>36</td>
<td>Vigilante</td>
<td>£86,000</td>
<td>Single</td>
<td>Unknown</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Wilma Rubble</td>
<td>Bedford</td>
<td>Bedfordshire</td>
<td>43</td>
<td>Housewife</td>
<td>N/A</td>
<td>Married</td>
<td>1</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Kat Dibble</td>
<td>Manhattan</td>
<td>New York</td>
<td>55</td>
<td>Policewoman</td>
<td>$36,000</td>
<td>Single</td>
<td>1</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Henry Bolingbroke</td>
<td>Bolingbroke</td>
<td>Lincolnshire</td>
<td>45</td>
<td>Landowner</td>
<td>Lots</td>
<td>Married</td>
<td>6</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Alan Brisingamen</td>
<td>Alderley</td>
<td>Cheshire</td>
<td>352</td>
<td>Arcanist</td>
<td>A pile of gems</td>
<td>Single</td>
<td>0</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html>
尝试此代码...
更新的css样式如下
tbody td {
background-color: #bbc;
min-width: 120px;
border: 1px solid #222;
max-width:120px;
}
thead th {
background-color: #99a;
min-width: 120px;
height: 32px;
border: 1px solid #222;
max-width:120px;
}
答案 1 :(得分：0)
删除thead和tbody上的display: block属性。
thead和tbody上的display属性负责该行为，您将其更改为“ block”，从而删除了您要遵循的表格行为。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？