Как сделать так, чтобы псевдоэлемент «после» всегда находился на одной строке в заголовках таблицы?

Question

У меня есть следующий CSS для форматирования таблицы с некоторыми липкими заголовками:

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;
}

Вот кодекс, показывающий это:

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

Если вынажмите на столбец «Мин», стрелка появится под ним.Который выглядит глупо.С помощью CSS, как мне сделать так, чтобы ширина столбца учитывала эту стрелку, чтобы они были шире по умолчанию?

Answer 1

Способ, которым я обрабатывал подобные ситуации, заключается в применении отступа к родительскому элементу и соответствующего отрицательного поля для псевдоэлемента, чтобы при переносе он охватывал все.

В вашем примереЯ немного изменил селекторы, чтобы нацелиться на strong, а не th.Но кроме этого, ключевыми изменениями являются стили на th strong и margin-right на th strong:after.

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;
}