代码之家 › 专栏 › 技术社区 › user448810

水平滚动和交替行背景色

html-table css html

user448810 · 技术社区 · 6 年前

<div style="overflow-x:auto;">
  <table>
    a bunch of tr/td ...
  </table>
</div>

table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #00008B;
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

我看到两个错误:第一,水平滚动条没有出现。第二,偶数行与奇数行的背景色相同。这种行为在IE 11和Chrome 69之间是一致的。

我做错了什么?我该怎么修?

1 回复 | 直到 6 年前

Stickers 6 年前

你需要解决几个问题:

上 table 元素,您可以尝试将其设置为 display:inline-table; min-width:100%; 如果需要,移除 width:100%; 让它成长。
tr:nth-child(even) {...} tr:nth-child(even) td {...} ; 对于列,使用 td:nth-child(even) {...}
如果你也有 thead tfoot 你只想把颜色涂在 tbody ,用于添加 tbody tr:nth-child(even) 等。

此外:

你不必使用 <table>

柔性箱: .container {display:inline-flex;}
.container {white-space:nowrap;} .item {display:inline-block; vertical-align:top; white-space:normal;}
CSS表格: .container {display:inline-table;} .item {display:table-cell;}

当然,不管你选择哪种方式,都要保留包装纸 <div style="overflow-x:auto;"> 如果需要的话。

推荐文章

Mona Jalal · 在HTML中使用PHP显示表的内容

2 年前

free · 基于特定默认列对表进行排序

3 年前

CRaw · 表格中的标题文本对齐:前2个单元格左对齐,后3个单元格右对齐

3 年前

Bryan Santos · 固定表头与引导

3 年前

Muhammad Moosa Zubairy · 在div之后得到不需要的逗号

3 年前

buckshot · 使用CSS隐藏gridview中的某些列

3 年前

SeniorFluffie · 完整动态HTML表悬停事件不工作

7 年前

Smithy · 如何将此文本置于电子邮件模板中表格行的中心

7 年前

user7158897 · 如何基于地图区域单击显示/隐藏不同的表内容

7 年前

user9727941 · 不知道如何在空白td中插入这些数据

7 年前