Question

我有以下表格：

   <table>
     <tr role="row" class="even">
        <td>Other Color</td>
        <td class="Green">Green<td/>
     </tr>
    </table>

并希望在最后一栏中绘制绿色圆圈。 CSS：

.Green{
    font-size:0px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display:inline-block;
    background: green!important;
    border:solid black 3px;}
td {
   border:solid black 3px;}

我需要为单元格绘制边框，但是这样做时它会在圆圈周围绘制边框，而不是单元格。 https://fiddle.jshell.net/Ulee/up3a5fp4/
任何提示？

Answer 1

这样的东西？

.green:after {
  content: "";
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: inline-block;
  background: green!important;
  vertical-align: middle;
}

.green {
  font-size: 0;
}

td {
  border: 3px solid #000;
}

<table>
  <tr role="row" class="even">
    <td>Other Color</td>
    <td class="green">Green</td>
  </tr>
</table>

Answer 2

的CSS：

.Green{
   border:solid green 3px;
   font-size:0px;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   display:inline-block;
   background: green!important;  
}
td {
  border:solid black 3px;
}

你的html包含一点错误，你的html是： <td/> ，但格式正确为： </td>

如何绘制圆css

2 个答案: