我正在尝试保持表格的thead列和tbody列对齐,同时保持tbody可滚动。我将thead显示器设置为table-header-group,将tbody设置为table-row-group,以解决对齐问题,但随后无法滚动。
这是jsfiddle。我试图设置第一列的宽度,同时保持整体对齐。
我无法为每列设置宽度,因为此表是动态生成的(使用angular ng-repeat),可能只有3列和多达12列
任何指针都会有所帮助JsFiddle
.table {
border-collapse: collapse;
width: 100%;
}
.table td {
font-size: 14px;
padding: 10px 20px;
overflow: hidden;
word-break: normal;
color: #333;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-color: #FFFFFF;
font-family: "Courier New", Courier, monospace !important;
text-align: center;
}
.table th {
font-weight: bold;
font-family: "Courier New", Courier, monospace !important;
text-align: center;
font-size: 14px;
border: 1px solid #ccc;
border-bottom: 2px solid #ccc;
padding: 10px 20px;
word-break: normal;
color: #333;
background-color: #F0F0F0;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 100px;
display: block;
}
thead {
display: table;
width: calc(100% - 17px);
table-layout: fixed;
/* position: sticky; */
}
tbody tr {
table-layout: fixed;
display: table;
width: 100%;
}
tbody tr td:first-child {
width: 40%;
}
thead tr:nth-child(2) th:first-child {
width: 40%;
}
td {
white-space: normal;
}
<table class="table">
<thead>
<tr>
<th colspan=2>Course ID</th>
<th colspan=1>Course Name</th>
<th colspan=1>Course Name</th>
</tr>
<tr>
<th>Course ID</th>
<th>Course ID2</th>
<th>Course Name</th>
<th>Course Name2</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello theresdfdsfsfsafdsafdsafdsafdsadfsadfsafd</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
</tbody>
</table>
最佳答案
我已经用以下代码替换了您的nth-child
css代码,并且可以正常工作。
.table {
border-collapse: collapse;
width: 100%;
}
.table td {
font-size: 14px;
padding: 10px 20px;
overflow: hidden;
word-break: normal;
color: #333;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-color: #FFFFFF;
font-family: "Courier New", Courier, monospace !important;
text-align: center;
}
.table th {
font-weight: bold;
font-family: "Courier New", Courier, monospace !important;
text-align: center;
font-size: 14px;
border: 1px solid #ccc;
border-bottom: 2px solid #ccc;
padding: 10px 20px;
word-break: normal;
color: #333;
background-color: #F0F0F0;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 100px;
display: block;
}
thead {
display: table;
width: calc(100% - 17px);
table-layout: fixed;
/* position: sticky; */
}
tbody tr {
table-layout: fixed;
display: table;
width: 100%;
}
td {
white-space: normal;
}
th:nth-child(1) {width:50%;}
td:nth-child(-n + 2) {
width:25%;
}
<table class="table">
<thead>
<tr>
<th colspan=2>Course ID</th>
<th colspan=1>Course Name</th>
<th colspan=1>Course Name</th>
</tr>
<tr>
<th>Course ID</th>
<th>Course ID2</th>
<th>Course Name</th>
<th>Course Name2</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello theresdfdsfsfsafdsafdsafdsafdsadfsadfsafd</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
<tr>
<td>hello there</td>
<td>hello</td>
<td>there</td>
<td>world</td>
</tr>
</tbody>
</table>
这会将第一个
th
设置为50%的值(您可以根据自己的喜好进行更改)。th:nth-child(1) {
width:50%;
}
然后,将前2个
td
设置为25%的宽度(上述宽度的一半,当前设置为50%,因此将其相应地更改为您在上述CSS中设置的任何数字的一半)。td:nth-child(-n + 2) {
width:25%;
}
希望这对您有所帮助!