Question

我有一个很大的表格用于在html中进行调度，我想冻结左栏。

我的原始CSS看起来像这样：

table, th, td {
   border: 1px solid black;
    border-collapse: collapse
} 
td {
    min-width: 35px;
    width: 35px;
    text-align:center;
}
td.name{
    min-width: 150px;
    width: 150px;
    text-align:left;
}

我调整它看起来像这样：

table, th, td {
   border: 1px solid black;
    border-collapse: collapse
} 
td {
    min-width: 35px;
    width: 35px;
    text-align:center;
}
td.name{
    min-width: 150px;
    width: 150px;
    text-align:left;
    Position:fixed;
}

希望这会在滚动期间冻结左列。相反，我得到的行重叠，当它确实冻结时，滚动的文本在冻结的行后面可见。

实施例： https://jsfiddle.net/780r86qL/

我该怎么做才能解决这两个问题？

Answer 1

添加背景：白色;

https://jsfiddle.net/780r86qL/2/

table, th, td {
border: 1px solid black;
border-collapse: collapse;
background: white;
}

Answer 2

请参阅此fiddle

HTML中的简单更改会使其看起来更好。将 添加到空的<td>中，例如

<tr>
    <td class="name"><a href="schedules.php?user_id=1647">A. Name</a>
    </td>
    <td colspan="28">&nbsp;</td>
    <td bgcolor="Green" colspan="16">&nbsp;</td>
    <td colspan="52">&nbsp;</td>
</tr>

出现这种行为的原因是，当有<td>空时，相应的<tr>没有高度破坏了你的设计。

Answer 3

您可以将第一列的绝对位置放在第一列并将整个表放在溢出x滚动块中：

.headcol {
    position:absolute;
    width:5em;
    left:0;
    top:auto;
    border-right: 0px none black;
    border-top-width:3px; /*only relevant for first row*/
    margin-top:-3px; /*compensate for top border*/
}

的jsfiddle： http://jsfiddle.net/emn13/YMvk9/

冻结表格中最左边的列

3 个答案:

请参阅此fiddle