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本身。见demo：

＆＃13;

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

＆＃13;

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

＆＃13;

了解css箭头技巧的一个好方法是为每个边框赋予不同的颜色。我确定你一看到结果就可以很容易地理解为什么边框宽度必须是10px才能得到一个20px宽的箭头：

＆＃13;

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

＆＃13;

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

＆＃13;

如何在表格标题旁边显示CSS箭头？

1 个答案: