html - 如何让 CSS 箭头出现在表格标题旁边？

Question

我正在尝试使用 CSS 使一个向上或向下的小箭头出现在我的表格标题中的单元格旁边，但该箭头出现在我的标题顶部，它似乎比我认为的 20 像素大得多会在基地。

.headerRow {
  background-color: #000000;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f00;
}

<table id="searchResults">
  <thead>
    <tr class="headerRow">
      <th class="headerRaceName arrow-down" data-order="name">Event</th>
      <th class="headerYear" data-order="day">Yr</th>
      <th class="headerDate" data-order="day">Date</th>
      <th class="headerDistance">Distance</th>
      <th class="headerLocation" data-order="location">Location</th>
    </tr>
  </thead>
</table>

为了让箭头整齐地出现在表格标题的右侧，我缺少什么？

Answer 1

编辑:将箭头移到右边。

嗯，20px 是箭头大小的一半，因此如果您希望箭头的宽度为 20px，则应为 10px。如果你想在 th 中添加文本，你应该使用伪元素而不是修改 th 本身。看演示:

.arrow-down:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #f00;
}

<table id="searchResults">
  <thead>
    <tr class="headerRow">
      <th class="headerRaceName arrow-down" data-order="name">Event </th>
    </tr>
  </thead>
</table>

理解 css 箭头技巧的一个好方法是为每个边框赋予不同的颜色。我敢肯定，一旦您看到结果，您就会很容易理解为什么边框宽度必须为 10px 才能获得 20px 宽的箭头:

.arrow-down:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  border-left: 10px solid yellow;
  border-right: 10px solid blue;
  border-top: 10px solid red;
  border-bottom: 10px solid green;
}

<table id="searchResults">
  <thead>
    <tr class="headerRow">
      <th class="headerRaceName arrow-down" data-order="name">Event </th>
    </tr>
  </thead>
</table>