在 Table 个单元格的角添加一个球体形状

Question

我有一个 table 用于 GUI 表示目的。对于 table 的某些单元格，角落里有一个球体。页脚在角落有一个加号（字体真棒图标）。我尝试放置球体，但仅在单元格内对齐。

图中要达到的目标

帮我解决这个问题

.damage-chart{
  border: 3px solid #dddddd;
  width: 80%;

}
.damage-chart td{
  border: 2px solid #f3f3f3;
  height: 30px;
  width: 11%;
}

.damage-chart, .damage-chart td{
  border-top: none;
  border-right: none;
}

 <table class="damage-chart">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
   </table>

Answer 1

使用position: relative和position: absolute可以解决您的问题。试试这个代码。

<table class="damage-chart">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td><span class="sphere"></span></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td><span class="plus">+</span></td>
        <td><span class="plus">+</span></td>
        <td><span class="plus">+</span></td>
        <td><span class="plus">+</span></td>
        <td style="width: 3%"></td>
      </tr>
   </table>

.damage-chart{
  border: 3px solid #dddddd;
  width: 80%;

}
.damage-chart td{
  border: 2px solid #f3f3f3;
  height: 30px;
  width: 11%;
  position: relative;
}

.damage-chart, .damage-chart td{
  border-top: none;
  border-right: none;
}
.sphere {
  background-color: red;
  position: absolute;
  display: block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  right: -7px;
  top: -7px;
  z-index: 2;
}
.plus {
  position: absolute;
  font-weight: bold;
  display: block;
  right: -8px;
  bottom: -10px;
  z-index: 2;
}

Answer 2

您可以使用 CSS transformations 来定位球体。

'Plus' 符号可以由伪元素 ::after 和最后一行的每个单元格的 content: '+'; 创建。

此外，您可以使用border-collapse: collapse;来避免边框之间的间隙。并尽量避免内联样式声明，您可以简单地 select 每行的最后一个单元格 :last-child select or.

.damage-chart {
  border: 3px solid #dddddd;
  width: 80%;
  padding: 0;
  margin-top: 20px;
  border-collapse: collapse;
}

.damage-chart td {
  border: 2px solid #f3f3f3;
  height: 30px;
  width: 11%;
}
.damage-chart tr td:last-child {
  width: 3%;
}

.damage-chart,
.damage-chart td {
  border-top: none;
  border-right: none;
}

.sphere {
  background: #b11a5a;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translate(-9px, 17px);
 -ms-transform: translate(-9px, 17px); /* IE 9 */
 -webkit-transform: translate(-9px, -17px); /* Safari */
}

.damage-chart tr:last-child td {
  position: relative;
}

.damage-chart tr:last-child td::after {
  content: '+';
  font-family: Arial;
  font-size: 1.5em;
  position: absolute;
  bottom: -16px;
  left: -8px;
}

<table class="damage-chart">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td><div class="sphere"></div></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td><div class="sphere"></div></td>
    <td></td>
  </tr>
  <tr>
    <td><div class="sphere"></div></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 3

表格有一个复杂而精巧的机制，可以帮助它快速将所有列更新为相同的 width/height 跨列和行。好吧，准确地说，不是那么快，但仍然是：它就在那里。

此功能的结果是 table 个组成元素（<thead>、<tbody>、<tfoot>、<tr>、<td> , <th>, <col>, <colgroup> 和 <caption>) 在不同的浏览器中有不同的实现，你不能依赖块级属性来可靠地处理它们。例如，position:relative doesn't work 在 <tr> 元素上（还有许多其他 "exceptions" 像这个一样）。

与其记住哪些对哪些 table 元素有效，哪些无效，建议（并且更安全）在 table 单元格中使用块级元素来定位点：

td {
  position: relative;
  padding: 1rem;
  border: 1px solid #ddd;
}

red-ball {
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: -8px;
  left: -8px;
  border-radius: 8px;
  background-color: #900;
}
table {
  width: calc(100% - 2rem);
  border-collapse:collapse;
  margin: 1rem;
}

<table class="damage-chart" >
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
  <tr>
    <td>
      <red-ball></red-ball>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
</table>

在 Table 个单元格的角添加一个球体形状

Add a sphere shapes in corner of Table cells

html

css

html-table

css-shapes