位于表格外部的 CSS 单元格以及如何处理其宽度和边框

嗨，我正在编写一个简单的甘特图组织器作为演示。我希望主表是可滚动的，其中几列"冻结"，这样在桌子周围移动时它们总是在视线范围内。我使用了以下建议：如何创建具有固定/冻结左列和可滚动正文的 HTML 表格？这意味着表格被赋予一个边距，来自"冻结"列的单元格位于该边距内的表格其余部分的外部。

我所做的事情的例子：https://jsfiddle.net/6pm6rztx/

<html>
<head>
<style>
#ChartArea
{
margin-left:340px;
overflow-x:auto;  
overflow-y:visible;
padding:0;
}

#ganttable { border-collapse:collapse; border-spacing:0;border-top: 1px solid grey; }
#ganttable td, th {
            margin:0;
            border:1px solid grey;
            white-space:nowrap;
            border-top-width:0px;
        }
#ganttable tr{height:20px}
/*make the first 4 cols "frozen", should I make different td,th stuff for these ones for borders etc */
#ganttable td:first-child { position:absolute;left:0px; min-width:20px;max-width:20px;}
#ganttable td:nth-child(2) {position:absolute;left:20px;min-width:20px;max-width:20px;}
#ganttable td:nth-child(3) {position:absolute;left:40px;min-width:150;max-width:150px;text-overflow: ellipsis; overflow:hidden;}
#ganttable td:nth-child(4) {position:absolute;left:190px; min-width:150px;max-width:150px;text-overflow: ellipsis;overflow:hidden}

.bgtd {background-color: red;}
</style>
</head>
<body>
<div id="ChartArea"><table id="ganttable"><tr><td>X</td><td>[]</td><td>Task</td><td>Responsible</td><td>2017-03-05</td><td>2017-03-06</td><td>2017-03-07</td><td>2017-03-08</td><td>2017-03-09</td><td>2017-03-10</td><td>2017-03-11</td><td>2017-03-12</td><td>2017-03-13</td><td>2017-03-14</td><td>2017-03-15</td><td>2017-03-16</td><td>2017-03-17</td><td>2017-03-18</td><td>2017-03-19</td><td>2017-03-20</td><td>2017-03-21</td><td>2017-03-22</td><td>2017-03-23</td><td>2017-03-24</td><td>2017-03-25</td><td>2017-03-26</td><td>2017-03-27</td><td>2017-03-28</td><td>2017-03-29</td><td>2017-03-30</td><td>2017-03-31</td><td>2017-04-01</td><td>2017-04-02</td><td>2017-04-03</td><td>2017-04-04</td><td>2017-04-05</td><td>2017-04-06</td><td>2017-04-07</td><td>2017-04-08</td></tr><tr><td><button class="delcell" onclick="remTask(this);">X</button></td><td><button class="modcell" onclick="openModForm(this);">[]</button></td><td>Taskg</td><td>Personas</td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td><button class="delcell" onclick="remTask(this);">X</button></td><td><button class="modcell" onclick="openModForm(this);">[]</button></td><td>Taskg</td><td>Personas</td><td></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td><button class="delcell" onclick="remTask(this);">X</button></td><td><button class="modcell" onclick="openModForm(this);">[]</button></td><td>Required_task</td><td>Personas</td><td></td><td></td><td></td><td></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td><button class="delcell" onclick="remTask(this);">X</button></td><td><button class="modcell" onclick="openModForm(this);">[]</button></td><td>longone777</td><td>Personas</td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td></tr></table></div>
</body>
</html>

如您所见，前三个单元格存在一些问题 - 尽管我已经指定了单元格的宽度，但边框就在内容的末尾。这与他们在实际桌子之外的位置有关吗？我该如何修复它 - 我希望它们具有与我指定它们一样宽的漂亮单元格，中间有灰色折叠边框。(就像桌子的其余部分一样(

您的代码中有拼写错误。您已使用min-width:150但未指定px。添加它应该可以解决您的问题。

在这里检查这个小提琴：https://jsfiddle.net/gurtejsingh/6pm6rztx/3/

此外，我更新了您的位置属性，以使绝对单元格更好地对齐。

希望这有帮助。干杯。

相关内容

最新更新

热门标签：