凍結表中最左邊的列
[英]Freezing the leftmost column in a table
問題描述
我有一個很大的表，可用於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/
我該怎么做才能解決這兩個問題？
4 個解決方案
解決方案1
2 2015-08-25 19:21:35
添加背景：白色；
https://jsfiddle.net/780r86qL/2/
table, th, td {
border: 1px solid black;
border-collapse: collapse;
background: white;
}
解決方案2
1 2015-08-25 19:28:22
看到這個小提琴
對HTML進行簡單的更改將使其看起來更好。 添加 例如，以空<td>
<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>
發生這種現象的原因是，當<td>為空時，對應的<tr>的高度沒有<tr>您的設計。
解決方案3
0 2015-08-25 19:21:28
您可以將絕對位置放在第一列，並將整個表放在一個溢出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/
解決方案4
0 2015-08-25 20:38:01
這很好用...
<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;
}
根據我的用例，這工作正常。
在最左邊和最右邊的單元格與表格邊框之間放置間距
[英]putting spacing between the leftmost and rightmost cells and the table border
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.