时间戳

首页 > 解决方案 > 在表格数据中添加不同颜色的圆圈

html - 在表格数据中添加不同颜色的圆圈

问题描述

这是桌子的图像

我想在表格数据单元格中添加不同颜色的圆圈？

我尝试过使用 CSS，但定位不好。

.circle{
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block; }

我需要为每种颜色创建单独的类吗？为每种颜色创建单独的类会使 CSS 代码冗长。

我怎样才能做到这一点

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    font-size: 13px;
}

th {
    font-size: 14px;
    font-weight: 400;
    color: #888;
    border-bottom: 2px solid #000;
    padding: 10px 8px;
}

td {
    border-bottom: 1px solid #ccc;
    color: #000;
    padding: 6px 8px;
    text-align: center;
}
<table>
    <thead>
       <tr>
          <th>Head 1</th>
          <th>Head 2</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td>Data</td>
          <td>Black</td>
       </tr>
       <tr>
          <td>PEWA</td>
          <td>Yellow</td>
       </tr>
       <tr>
          <td>Data</td>
          <td>Blue</td>
       </tr>
       <tr>
          <td>AFW</td>
          <td>Orange</td>
       </tr>
       <tr>
          <td>YSW</td>
          <td>Red</td>
       </tr>
       <tr>
          <td>GWG</td>
          <td>Green</td>
       </tr>
       <tr>
          <td>BFD</td>
          <td>Blue</td>
       </tr>
       <tr>
          <td>VHY</td>
          <td>Violet</td>
       </tr>
       <tr>
          <td>GWY</td>
          <td>Grey</td>
       </tr>
       <tr>
          <td>WDA</td>
          <td>Yellow</td>
       </tr>
    </tbody>
 </table>

标签： htmlcss

解决方案

您可以使用spans 作为颜色并将文本div与它一起放在 a 中。然后使用display: flex正确对齐它们和颜色的内联样式：

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  font-size: 13px;
}

th {
  font-size: 14px;
  font-weight: 400;
  color: #888;
  border-bottom: 2px solid #000;
  padding: 10px 8px;
}

td {
  border-bottom: 1px solid #ccc;
  color: #000;
  padding: 6px 8px;
  text-align: center;
}

.color {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 55px;
  max-width: fit-content;
  margin: auto;
}

span {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}
<table>
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>
        <div class="color">
          Black <span style="background-color: black;"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>PEWA</td>
      <td>
        <div class="color">
          Yellow <span style="background-color: yellow;"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>Data</td>
      <td>
        <div class="color">
          Blue <span style="background-color: blue;"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>AFW</td>
      <td>
        <div class="color">
          Orange <span style="background-color: orange;"></span>

        </div>
      </td>
    </tr>
    <tr>
      <td>YSW</td>
      <td>
        <div class="color">
          Red <span style="background-color: red;"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>GWG</td>
      <td>
        <div class="color">
          Green <span style="background-color: green"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>BFD</td>
      <td>
        <div class="color">
          Blue <span style="background-color: blue;"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>VHY</td>
      <td>
        <div class="color">
          Violet <span style="background-color: violet;"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>GWY</td>
      <td>
        <div class="color">
          Grey <span style="background-color: grey;"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>WDA</td>
      <td>
        <div class="color">
          Yellow<span style="background-color: yellow;"></span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

但是，如果您想稍微清理一下 HTML，那么 Sassfor循环会更好：

$colors: #000000, #ffff00, #0000ff, #f5a002, #ff0000, #008000, #0202f9, #ee82ee,
    #808080, #fcfc06;

@each $color in $colors {
    $i: index($colors, $color);

    tr:nth-of-type(#{$i}) span {
        background-color: $color;
    }
}

推荐阅读