我正在使用一個簡單的表格模板來修復第一列。在許多用例中作業正常，但在使用“rowspan”的情況下就不行了。
HTML：
<table>
<tbody>
<tr>
<td class='first'>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td class='first' rowspan='3'>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td class='first'>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
CSS：
table td {
border: 1px solid red;
background: lightpink;
min-width: 100px;
max-width: 100px;
width: 100px;
height: 20px;
}
table td.first:nth-child(1) {
border: 1px solid blue;
background: lightblue;
position: relative;
display: block;
width: 300px;
min-width: 300px;
max-width: 300px;
}
table tbody {
position: relative;
display: block;
overflow: scroll;
width: 500px;
}
table {
position: relative;
overflow: hidden;
border: 1px solid black;
}
JS（jQuery）：
$('tbody').scroll(function(e) {
$('td.first:nth-child(1)').css("left", $("tbody").scrollLeft());
});
我需要具有特定寬度的第一列。以及所有其他寬度不同的列。不幸的是，如果使用“rowspan”并且每行的第一個 TD 設定為“顯示：塊”，則它不起作用。
看我的例子：https ://jsfiddle.net/zqjc9h0p/2/
uj5u.com熱心網友回復：
您可以替換display: block為display: table-cell：
$('tbody').scroll(function(e) {
$('td.first:nth-child(1)').css("left", $("tbody").scrollLeft());
});table td {
border: 1px solid red;
background: lightpink;
min-width: 100px;
max-width: 100px;
width: 100px;
height: 20px;
}
table td.first:nth-child(1) {
border: 1px solid blue;
background: lightblue;
position: relative;
display: table-cell;
width: 300px;
min-width: 300px;
max-width: 300px;
}
table tbody {
position: relative;
display: block;
overflow: scroll;
width: 500px;
}
table {
position: relative;
overflow: hidden;
border: 1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class='first'>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td class='first' rowspan='3'>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td class='first'>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/490404.html
下一篇：如何將文本集中在按鈕內