Question

加载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之间的行为一致。

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

Answer 1

您需要修复几件事：

在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)等。< / p>

此外：

您无需使用<table>和其他选项：

Flexbox：.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;">保留在那里。

水平滚动和替换行背景颜色

1 个答案: