使用CSS＆amp ;;将三角形（箭头）元素定位在表格内的文本中HTML

Question

在重新创建此表时，我尝试在第一行中重新创建三角形位置：

这部分用HTML：

<table>
    (...)
    <tr>
        <td><div id="arrowUp"></div>Norrk&ouml;ping</td>

箭头代码：

#arrowUp {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #0dff00 transparent;
}

我不知道如何定位这个。尝试改变位置属性，但它似乎打破了表，边缘拉伸行。它应该与显示和位置有关，但我对可能性感到茫然，无处可见。

Answer 1

▶1 ^st 选项：

您可以通过在 position: absolute 元素上设置 #arrowUp 来实现此目的。然后，您可以使用 top 和 left 来将箭头准确定位在您想要的位置。

jsFiddle：→here。

<强>段：

td {
  position: relative;
  padding-left: 20px;
}

.arrowUp,
.arrowDown {
  content: "";
  border-style: solid;
  border-width: 5px 5px;
  position: absolute;  
  left: 8.5%;
  transform: translate(-50%, -50%);
}
  
.arrowUp {
  border-color: transparent transparent #0dff00 transparent;
  top: 37%;
}

.arrowDown {
  border-color: #ff0000 transparent transparent transparent;
  top: 60%;
}

<table>
  <tr><td><div class = "arrowUp"></div>Norrk&ouml;ping</td></tr>
  <tr><td><div class = "arrowDown"></div>AIK</td></tr>
</table>

▶2 ^nd 选项：

在使用1 ^st 选项中提到的属性时，您可以通过设置 {{1}来摆脱 div#arrowUp 元素并使用 <td class = "arrowUp">Norrk&ouml;ping</td> 伪元素。这样，您可以使用更少的代码，同时获得相同的结果。

jsFiddle：→here。

<强>段：

:before

.arrowUp,
.arrowDown {
  position: relative;
  padding-left: 20px;
}

.arrowUp:before,
.arrowDown:before {
  content: "";
  border-style: solid;
  border-width: 5px 5px;
  position: absolute;  
  left: 8.5%;
  transform: translate(-50%, -50%);
}
  
.arrowUp:before {
  border-color: transparent transparent #0dff00 transparent;
  top: 37%;
}

.arrowDown:before {
  border-color: #ff0000 transparent transparent transparent;
  top: 60%;
}

Answer 2

您可以使用position: absolute

td {
  position: relative;
  padding-left: 15px;
}
#arrowUp {
  position: absolute;
  top: 3px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent #0dff00 transparent;
}

<table>
  <tr>
    <td>
      <div id="arrowUp"></div>Norrk&ouml;ping</td>
  </tr>
</table>

您可以使用伪元素

在没有div的情况下解决此问题

td {
  position: relative;
  padding-left: 15px;
}
td.arrowUp:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent #0dff00 transparent;
}

<table>
  <tr>
    <td class="arrowUp">
      Norrk&ouml;ping</td>
  </tr>
</table>

或任何HTML实体箭头

td {
  position: relative;
  padding-left: 15px;
}
td.arrowUp:before {
  content: '⇧';
  position: absolute;
  color: lime;
  left: 0;
  font-weight: bold;
}

<table>
  <tr>
    <td class="arrowUp">
      Norrk&ouml;ping</td>
  </tr>
</table>

旁注：我建议使用伪元素而不是额外元素