用不同的 colors 添加 Circle 内表数据

Question

Here is the image of the table

I want to add circles with different colors inside the table data cells?

I have tried with CSS but the positioning was not good.

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

Do I need to create separate classes for every color? Creating separate classes for every color makes the CSS code lengthy.

How can I achieve this

 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>

Answer 1

You could use span s for the colors and put the text inside a div along with it. Then use display: flex to properly align them and inline styles for the color:

 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>

Though, if you wanted to clean-up the HTML a bit, a Sass for loop would be better:

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

Answer 2

Do you need something like this:

https://codepen.io/quanhvsudobo/pen/NWxEdyY

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;
}
.circle {
   height: 25px;
   width: 25px;
   border-radius: 50%;
   display: inline-block;
}

.td-content {
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
 }

 .black {
      background-color: #000;
      margin-left: 2px;
 }

Answer 3

If you want to shorter your code, you could consider this 2 following ways which have:

1. Set directly the background-color attribute to HTML, this approach will make your html longer than it should, just in case you don't want to interfere to the css file
2. Set background-color attribute with specific class ( .bg-green will set background-color to green ) to css file for further use, you can apply this class for anywhere in the html in order to change the background color, not only for this table html case

Another thing is, if you want to align middle something, you better wrap the text with the tag whose position either block or inline-block for easier to control. In your case, change <td>Black<span></span></td> to <td><span>Black</span><span></span></td>, so if you add attribute vertical-align: middle to both span`, it's gonna work.

You can take a look at the snippet below for more detail (the first two table-row in the table HTML is used with the first method, the other two is the second one)

 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; } /* custom */.custom_table span{ display: inline-block; vertical-align: middle; /* this attribute will middle align all the "span" tag at same level */ }.custom_table.circle { margin-left: 5px; /* spacing the circle and the text */ height: 15px; width: 15px; border-radius: 50%; display: inline-block; }.bg-blue { background-color: blue; }.bg-orrange { background-color: orange; }

 <table class="custom_table"> <thead> <tr> <th>Head 1</th> <th>Head 2</th> </tr> </thead> <tbody> <tr> <td>Data</td> <td><span>Black</span><span class="circle" style="background:black;"></span></td> </tr> <tr> <td>PEWA</td> <td><span>Yellow</span><span class="circle" style="background:yellow;"></span></td> </tr> <tr> <td>Data</td> <td><span>Blue</span><span class="circle bg-blue"></span></td> </tr> <tr> <td>AFW</td> <td><span>Orange</span><span class="circle bg-orrange"></span></td> </tr> </tbody> </table>

Hope this would help