时间戳

首页 > 解决方案 > 水平滚动和交替行背景颜色

html - 水平滚动和交替行背景颜色

问题描述

加载 html/css 文件时遇到错误。以下是该文件的内容：

<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 之间是一致的。

我做错了什么？我如何解决它？

标签： htmlcsshtml-table

解决方案

你需要修复几件事：

  • 在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;">根据需要保留包装器。

推荐阅读