【问题标题】：Freezing the leftmost column in a table冻结表中最左边的列
【发布时间】：2015-11-19 15:27:02
【问题描述】：

我有一个很大的表，用于在 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/

我可以做些什么来解决这两个问题？

【问题讨论】：

标签： html css

【解决方案1】：

这很好用……

    <table cellpadding=3 style='table-layout:fixed; float: left; font-size:85%; width:7000px; '>
<tr>
    <td class="name">Name</td>
    <td>00:00</td>
    <td>00:15</td>
    <td>00:30</td>
    <td>00:45</td>
    <td>01:00</td>
    <td>01:15</td>
    <td>01:30</td>
    <td>01:45</td>
    <td>02:00</td>
    <td>02:15</td>
    <td>02:30</td>
    <td>02:45</td>
    <td>03:00</td>
    <td>03:15</td>
    <td>03:30</td>
    <td>03:45</td>
    <td>04:00</td>
    <td>04:15</td>
    <td>04:30</td>
    <td>04:45</td>
    <td>05:00</td>
    <td>05:15</td>
    <td>05:30</td>
    <td>05:45</td>
    <td>06:00</td>
    <td>06:15</td>
    <td>06:30</td>
    <td>06:45</td>
    <td>07:00</td>
    <td>07:15</td>
    <td>07:30</td>
    <td>07:45</td>
    <td>08:00</td>
    <td>08:15</td>
    <td>08:30</td>
    <td>08:45</td>
    <td>09:00</td>
    <td>09:15</td>
    <td>09:30</td>
    <td>09:45</td>
    <td>10:00</td>
    <td>10:15</td>
    <td>10:30</td>
    <td>10:45</td>
    <td>11:00</td>
    <td>11:15</td>
    <td>11:30</td>
    <td>11:45</td>
    <td>12:00</td>
    <td>12:15</td>
    <td>12:30</td>
    <td>12:45</td>
    <td>13:00</td>
    <td>13:15</td>
    <td>13:30</td>
    <td>13:45</td>
    <td>14:00</td>
    <td>14:15</td>
    <td>14:30</td>
    <td>14:45</td>
    <td>15:00</td>
    <td>15:15</td>
    <td>15:30</td>
    <td>15:45</td>
    <td>16:00</td>
    <td>16:15</td>
    <td>16:30</td>
    <td>16:45</td>
    <td>17:00</td>
    <td>17:15</td>
    <td>17:30</td>
    <td>17:45</td>
    <td>18:00</td>
    <td>18:15</td>
    <td>18:30</td>
    <td>18:45</td>
    <td>19:00</td>
    <td>19:15</td>
    <td>19:30</td>
    <td>19:45</td>
    <td>20:00</td>
    <td>20:15</td>
    <td>20:30</td>
    <td>20:45</td>
    <td>21:00</td>
    <td>21:15</td>
    <td>21:30</td>
    <td>21:45</td>
    <td>22:00</td>
    <td>22:15</td>
    <td>22:30</td>
    <td>22:45</td>
    <td>23:00</td>
    <td>23:15</td>
    <td>23:30</td>
    <td>23:45</td>
</tr>
<tr>
    <td class='name'>Spanish Available</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>3</td>
    <td>3</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>5</td>
    <td>6</td>
    <td>6</td>
    <td>7</td>
    <td>9</td>
    <td>8</td>
    <td>12</td>
    <td>12</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>8</td>
    <td>11</td>
    <td>10</td>
    <td>9</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>9</td>
    <td>10</td>
    <td>10</td>
    <td>11</td>
    <td>10</td>
    <td>12</td>
    <td>10</td>
    <td>11</td>
    <td>9</td>
    <td>9</td>
    <td>6</td>
    <td>7</td>
    <td>10</td>
    <td>8</td>
    <td>8</td>
    <td>9</td>
    <td>11</td>
    <td>11</td>
    <td>10</td>
    <td>10</td>
    <td>6</td>
    <td>6</td>
    <td>4</td>
    <td>4</td>
    <td>1</td>
    <td>2</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>3</td>
    <td>3</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
</tr>
<tr>
    <td class='name'>Coordinators Available</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
</tr>
<tr>
    <td class='name'>Total Staff Available</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>3</td>
    <td>3</td>
    <td>4</td>
    <td>4</td>
    <td>7</td>
    <td>7</td>
    <td>7</td>
    <td>7</td>
    <td>6</td>
    <td>7</td>
    <td>7</td>
    <td>9</td>
    <td>10</td>
    <td>10</td>
    <td>15</td>
    <td>15</td>
    <td>14</td>
    <td>14</td>
    <td>14</td>
    <td>14</td>
    <td>11</td>
    <td>14</td>
    <td>13</td>
    <td>13</td>
    <td>15</td>
    <td>15</td>
    <td>15</td>
    <td>15</td>
    <td>12</td>
    <td>14</td>
    <td>13</td>
    <td>14</td>
    <td>13</td>
    <td>15</td>
    <td>13</td>
    <td>14</td>
    <td>12</td>
    <td>12</td>
    <td>9</td>
    <td>10</td>
    <td>12</td>
    <td>11</td>
    <td>11</td>
    <td>12</td>
    <td>14</td>
    <td>14</td>
    <td>13</td>
    <td>13</td>
    <td>7</td>
    <td>7</td>
    <td>5</td>
    <td>5</td>
    <td>2</td>
    <td>3</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>3</td>
    <td>3</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=2603">A. Name</a>
    </td>
    <td colspan="4"></td>
    <td bgcolor="Green" colspan="20"></td>
    <td colspan="72"></td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=1">A. Name</a>
    </td>
    <td colspan="24"></td>
    <td bgcolor="Grey" colspan="12"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Grey" colspan="7"></td>
    <td bgcolor="yellow" colspan="2">M</td>
    <td bgcolor="Grey" colspan="6"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Grey" colspan="3"></td>
    <td colspan="40"></td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=2519">A. Name</a>
    </td>
    <td colspan="24"></td>
    <td bgcolor="Green" colspan="8"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="16"></td>
    <td bgcolor="yellow" colspan="2">M</td>
    <td bgcolor="Green" colspan="-11"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="17"></td>
    <td colspan="38"></td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=2471">A. Name</a>
    </td>
    <td colspan="24"></td>
    <td bgcolor="Green" colspan="10"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="16"></td>
    <td bgcolor="yellow" colspan="2">M</td>
    <td bgcolor="Green" colspan="-12"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="16"></td>
    <td colspan="38"></td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=2600">A. Name</a>
    </td>
    <td colspan="26"></td>
    <td bgcolor="Green" colspan="8"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="17"></td>
    <td bgcolor="yellow" colspan="2">M</td>
    <td bgcolor="Green" colspan="-12"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="17"></td>
    <td colspan="36"></td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=2625">A. Name</a>
    </td>
    <td colspan="28"></td>
    <td bgcolor="Green" colspan="7"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="17"></td>
    <td bgcolor="yellow" colspan="2">M</td>
    <td bgcolor="Green" colspan="-12"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="18"></td>
    <td colspan="34"></td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=1647">A. Name</a>
    </td>
    <td colspan="28"></td>
    <td bgcolor="Green" colspan="16"></td>
    <td colspan="52"></td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=2470">A. Name</a>
    </td>
    <td colspan="28"></td>
    <td bgcolor="Green" colspan="9"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="17"></td>
    <td bgcolor="yellow" colspan="2">M</td>
    <td bgcolor="Green" colspan="-10"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="14"></td>
    <td colspan="34"></td>
</tr>
</table>

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;
position: fixed;
background-color:white;
z-index:999999;
}

我猜这根据您的用例工作正常。

【讨论】：

【解决方案2】：

看到这个fiddle

对 HTML 进行简单的更改会使它看起来更好。将&nbsp;添加到空的<td>s之类，例如

<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>s 为空时，对应的<tr>s 没有高度，这破坏了您的设计。

【讨论】：

【解决方案3】：

添加背景：白色；

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

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

【讨论】：

这非常适合背景文本，但不能解决消失的行问题。您的 jsfiddle 中有两行未显示文本。
我没看到，也许这会对你有所帮助。 stackoverflow.com/questions/1312236/…

【解决方案4】：

您可以绝对定位第一列并将整个表格放在溢出 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/

【讨论】：