超文本标记语言表格+固定列+位置:相对+没有<table>的默认标签
超文本标记语言表格+固定列+位置:相对+没有<table>的默认标签
提问于 2017-03-03 14:45:29
我想为HTML表格创建一个特定的布局，它有固定的列，而不使用默认标签(table，tbody，thead，tr，td，th)。
我开发了一个运行良好的示例，并意识到需要将position:relative添加到一些容器中。但是如果我添加了position:relative，布局就会中断...请参见下面的示例。
所以，问题来了。如何创建固定/粘滞列的表并保存position:relative，如下例所示？
.wrapper {
overflow-x: scroll;
}
.table, .table-head, .table-row {
position: relative; /* works perfect WITHOUT this line */
white-space: nowrap;
}
.table-head .table-cell {
background: #aaa;
}
.table-cell {
display: inline-block;
min-width: 50px;
border: 1px solid white;
background: #eee;
}
.fixed {
position: absolute;
}<div class="content" style="width: 400px">
<div class="wrapper" style="margin-left: 50px">
<div class="table">
<div class="table-head">
<div class="table-row">
<div class="table-cell fixed" style="left: 0px">0</div>
<div class="table-cell">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
</div>
</div>
<div class="table-body">
<div class="table-row">
<div class="table-cell fixed" style="left: 0px">a</div>
<div class="table-cell">b</div>
<div class="table-cell">c</div>
<div class="table-cell">d</div>
<div class="table-cell">e</div>
<div class="table-cell">f</div>
<div class="table-cell">a</div>
<div class="table-cell">b</div>
<div class="table-cell">c</div>
<div class="table-cell">d</div>
<div class="table-cell">e</div>
</div>
<div class="table-row">
<div class="table-cell fixed" style="left: 0px">a</div>
<div class="table-cell">b</div>
<div class="table-cell">c</div>
<div class="table-cell">d</div>
<div class="table-cell">e</div>
<div class="table-cell">f</div>
<div class="table-cell">a</div>
<div class="table-cell">b</div>
<div class="table-cell">c</div>
<div class="table-cell">d</div>
<div class="table-cell">e</div>
</div>
</div>
</div>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2017-03-03 14:59:20
如果像这样将.fixed位置更改为position: fixed会怎么样？
.wrapper {
overflow-x: scroll;
}
.table, .table-head, .table-row {
position: relative; /* works perfect WITHOUT this line */
white-space: nowrap;
}
.table-head .table-cell {
background: #aaa;
}
.table-cell {
display: inline-block;
min-width: 50px;
border: 1px solid white;
background: #eee;
}
.fixed {
position: fixed;
}<div class="content" style="width: 400px">
<div class="wrapper" style="margin-left: 50px">
<div class="table">
<div class="table-head">
<div class="table-row">
<div class="table-cell fixed" style="left: 0px">0</div>
<div class="table-cell">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
</div>
</div>
<div class="table-body">
<div class="table-row">
<div class="table-cell fixed" style="left: 0px">a</div>
<div class="table-cell">b</div>
<div class="table-cell">c</div>
<div class="table-cell">d</div>
<div class="table-cell">e</div>
<div class="table-cell">f</div>
<div class="table-cell">a</div>
<div class="table-cell">b</div>
<div class="table-cell">c</div>
<div class="table-cell">d</div>
<div class="table-cell">e</div>
</div>
<div class="table-row">
<div class="table-cell fixed" style="left: 0px">a</div>
<div class="table-cell">b</div>
<div class="table-cell">c</div>
<div class="table-cell">d</div>
<div class="table-cell">e</div>
<div class="table-cell">f</div>
<div class="table-cell">a</div>
<div class="table-cell">b</div>
<div class="table-cell">c</div>
<div class="table-cell">d</div>
<div class="table-cell">e</div>
</div>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42581807
复制相关文章
相似问题
腾讯云开发者
