相关疑难解决方法(0)
宽度为100%的HTML表格,在tbody中有垂直滚动
如何设置<table>100%宽度并仅在<tbody>垂直滚动内放置一些高度？
table {
width: 100%;
display:block;
}
thead {
display: inline-block;
width: 100%;
height: 20px;
}
tbody {
height: 200px;
display: inline-block;
width: 100%;
overflow: auto;
}
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>我希望避免增加一些额外的div,我要的是简单的表像这样,当我试图改变显示table-layout,position在CSS表以及更多的东西没有工作好与100%的宽度仅与PX固定宽度.
推荐指数
解决办法
查看次数
仅为html表冻结顶行(固定表格标题滚动)
我想制作一个顶行冻结的html表(所以当你垂直向下滚动时,你总能看到它).
有没有一种聪明的方法可以在没有javascript的情况下实现这一目标？
请注意,我不需要冻结左列.
推荐指数
解决办法
查看次数
Firefox中没有显示边框,表格上有边框折叠,位置:tbody上的相对或单元格上的背景颜色
请考虑以下HTML:
<html>
<head>
<style>
TABLE.data TD.priceCell
{
background-color: #EEE;
text-align: center;
color: #000;
}
div.datagrid table
{
border-collapse: collapse;
}
div.datagrid table tbody
{
position: relative;
}
</style>
</head>
<body>
<div id="contents" class="datagrid">
<table class="data" id="tableHeader">
<thead>
<tr class="fixed-row">
<th>Product</th>
<th class="HeaderBlueWeekDay">Price</th>
<th class="HeaderBlueWeekDay">Discount</th>
</tr>
</thead>
<tbody>
<tr style="font-style: italic;">
<td>Keyboard</td>
<td class="priceCell">20</td>
<td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>请注意,最后一个单元格的内联样式具有左边框和右边框.你(或至少我)会期望这是可见的.在IE中,情况就是这样.但在Firefox(6)中,事实并非如此.你可以通过以下方式解决
div.datagrid table tbody在CSS中删除相对位置- 更改
div.datagrid table tbody到div.datagrid …
推荐指数
解决办法
查看次数
Chrome中仅支持CSS的粘性表标题
我有以下Sass片段,我想让它<thead>在桌子滚动时浮动.这适用于Safari,但不适用于Chrome Version 58.0.3029.110 (64-bit).
我知道Chrome已经再次获得支持sticky,目前支持它,但它是最终的吗？这是Chrome错误还是我需要不同的解决方案？(我更喜欢CSS方法而不是Javascript,因为它更高效.)
.table {
thead {
background: white;
position: sticky;
top: 0;
z-index: 10;
}
}
推荐指数
解决办法
查看次数
表头位置：粘性和边框问题
在这篇文章之后，我有一个表格，我正在尝试获取粘性标题。除了我的表格样式的顶部和底部带有边框的标题。
我不明白的部分是顶部/底部边框应用于th与表格的其余部分一起滚动而不是留在“卡住”标题单元格中。有什么可以做的吗？
可以在此处找到工作示例：https : //codepen.io/smlombardi/pen/MNKqQY?editors=1100#0
let string = ''
console.log("oj")
for(let i=0; i<100; i++) {
string += `
<tr>
<td>Malcolm Reynolds</td>
<td>Captain</td>
<td>9035749867</td>
<td>mreynolds</td>
</tr>
`
}
document.getElementsByTagName('tbody')[0].innerHTML += string.table-sticky-container {
height: 200px;
overflow-y: scroll;
border-top: 1px solid green;
border-bottom: 1px solid green;
}
.table-sticky {
th {
position: sticky;
top: 0;
z-index: 2;
border-top: 1px solid red !important;
border-bottom: 2px solid red !important;
}
}<div class="table-sticky-container">
<table class="table table-sticky">
<thead class="thead-light">
<tr> …推荐指数
解决办法
查看次数
粘性头部边框消失
在设置带有粘性头部的 Excel 样式表格时，html我css意识到表格头部的边框看起来很奇怪。
这是代码：
table {
border-collapse: collapse;
position: relative;
}
tr:nth-child(even) {
background-color: lightgray;
}
th {
background-color: lightblue;
position: sticky;
top: 0;
}
th,
td {
border: 1px solid black;
padding: 10px 20px;
}<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</tbody>
</table>JSFiddle：https://jsfiddle.net/cpotdevin/5j3ah247/
下图显示了它在三种不同浏览器中的外观。
Chrome：
粘行上的上下边框消失。
Firefox：
所有内部边框都会消失。
Safari：
与 Chrome 中相同。
我也尝试不使用border-collapse: collapse;而是使用cellspacing=0 …
推荐指数
解决办法
查看次数