如何使 "after" pseudo-element 始终在我的 table headers 中的同一行？

Question

我有以下 CSS 来格式化 table 和一些粘性 headers:

div {
  position: relative;
  z-index: 1;
  overflow: scroll;
  height: 350px;
  width: 500px;
}

table {
  width: 100%;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  padding: 5px 10px;
  border: 1px solid #000;
  background: #fff;
  vertical-align: top;
}

th {
  color: #000;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

th:first-child {
  left: 0;
  z-index: 6;
}

td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ccc;
}

thead th {
  z-index: 5;
}

th:after {
  content: "";
  display: inline-block;
  vertical-align: inherit;
  height: 0;
  width: 0;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  margin-right: 1px;
  margin-left: 10px;
  float: right;
}

th[data-sorted="initial"]:after {
  visibility: visible;
  border-top-color: #ccc;
  margin-top: 5px;
}

th[data-sorted="true"]:after {
  visibility: visible;
}

th[data-sorted-direction="descending"]:after {
  border-top-color: inherit;
  margin-top: 7px;
}

th[data-sorted-direction="ascending"]:after {
  border-bottom-color: inherit;
  margin-top: 2px;
}

这是展示它的 Codepen：

https://codepen.io/anon/pen/jQjazq

如果您点击 "Min" 列，箭头会出现在它的下方。这看起来很愚蠢。使用 CSS 我该如何做到这一点，以便列的宽度考虑到箭头，因此默认情况下它们更宽？

Answer 1

我处理这种情况的方法是对父元素应用填充，并对伪元素应用相应的负边距，这样如果换行，它就会换行。

在您的示例中，我稍微更改了选择器以针对 strong 而不是 th。但除此之外，主要变化是 th strong 上的样式和 th strong:after 上的 margin-right。

https://codepen.io/anon/pen/mayWja

th strong {
  display: inline-block;
  padding-right: 20px;
}

th strong:after {
  content: "";
  display: inline-block;
  vertical-align: inherit;
  height: 0;
  width: 0;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  margin-right: -20px;
  margin-left: 10px;
  float: right;
}

th[data-sorted="initial"] strong:after {
  visibility: visible;
  border-top-color: red;
  margin-top: 5px;
}

th[data-sorted="true"] strong:after {
  visibility: visible;
}

th[data-sorted-direction="descending"] strong:after {
  border-top-color: inherit;
  margin-top: 7px;
}

th[data-sorted-direction="ascending"] strong:after {
  border-bottom-color: inherit;
  margin-top: 2px;
}

如何使 "after" pseudo-element 始终在我的 table headers 中的同一行？

How do I make the "after" pseudo-element always be on the same line in my table headers?

html

css

css-selectors

css-tables

pseudo-element