Question

https://kryogenix.org/code/browser/sorttable/#lefthandheader

通过上面的链接，我有一个可排序的表，该表是交替显示的。我尝试附加左侧的标头，但是...不配合。

使用CSS代码会导致数字在顶部对齐，并且与页面具有相同的背景颜色，而不是与行具有相同的背景颜色：

table.sortable tbody {
counter-reset: sortabletablescope;
}
table.sortable thead tr::before {
     content: "";
    display: table-cell;
}
table.sortable tbody tr::before {
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
    display: table-cell;
}

将其更改为此：

table.sortable.stripes tbody td:first-child::before {
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
    display: table-cell;
    vertical-align: center;
}

解决了背景问题，但仍未使数字垂直居中...并且如果左侧单元格包含足够的文本，则实际上它现在与数字重叠（尽管该文本看起来是底部对齐的，因此所有内容都清晰可见），但看起来很糟糕。

其他与表格相关的CSS：

table.sortable.stripes tbody {
counter-reset: sortabletablescope;
}
table.sortable.stripes thead tr::before {
    content: "";
    display: table-cell;
    vertical-align: central;
}
table.sortable.stripes tbody tr:nth-child(2n) td {
  background: #666;
}
table.sortable.stripes tbody tr:nth-child(2n+1) td {
  background:#555;
}table.sortable thead {
    font-weight: bold;
    cursor: pointer;
    background-color:#000;
}
table, td, th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
vertical-align: central;
border-collapse: collapse;
text-align: center;
padding: 8px;
padding-right: 12px;
padding-left: 12px;
text-wrap:normal;
word-wrap:normal;
}
table {
     border: thin solid #FFF;
    background-color: #666;
}
td, th {
    border: none;
    max-width: 250px;
}

Answer 1

要为tr中的所有内容分配背景，您不能使用table.sortable.stripes tbody tr:nth-child(2n) td；这只会定位到td元素。而是将其分配给整个tr；使用table.sortable.stripes tbody tr:nth-child(2n)作为选择器。
如果将某事的display的值更改为table-cell，则并不意味着其他属性也会更改为匹配。如果希望::before的行为完全像表单元格一样，请确保其他属性也匹配。换句话说，您现在分配给td的样式也应该也分配给tr::before。
vertical-align出错，其值应为middle。

因此，您的代码的简化版本如下所示。（请注意：HTML来自您链接到的网站。）

table.sortable.stripes tbody {
  counter-reset: sortabletablescope;
}

table.sortable.stripes tbody tr:nth-child(2n) {
  background: #666;
}

table.sortable.stripes tbody tr:nth-child(2n+1) {
  background: #555;
}

table {
  border: thin solid #FFF;
  background-color: #666;
  border-collapse: collapse;
}

table.sortable td, table.sortable tr::before {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #FFFFFF;
  vertical-align: middle;
  text-align: center;
  padding: 8px 12px;
  text-wrap: normal;
  word-wrap: normal;
  border: none;
  max-width: 250px;
}

table.sortable tbody tr::before {
  content: counter(sortabletablescope);
  counter-increment: sortabletablescope;
  display: table-cell;
}

<table class="sortable stripes">
  <tbody>
    <tr> <td>Methusaleh</td>     <td>969</td> </tr>
    <tr> <td>Elijah Snow</td>    <td>100</td> </tr>
    <tr> <td>Shirley Temple</td> <td> 10</td> </tr>
    <tr> <td>George Burns</td>   <td> 91</td> </tr>
    <tr> <td>Mrs Robinson</td>   <td> 40</td> </tr>
  </tbody>
</table>

用tr :: before格式化

1 个答案: