自定义透明框，边框仅在对象周围

Question

https://i.stack.imgur.com/n3779.png

我当前的解决方案在宽度方面存在一些问题，如果框内的图标宽度比其他图标小 - 它会发生框变窄。

table { border-top: 1px double #7F7F7F; }
table td + td { border-left: 1px solid #7F7F7F; }

Answer 1

好吧，我认为您可以使用弹性盒模型。

https://jsfiddle.net/pablodarde/cyg5sawy/

.HTML

<table>
  <tr>
    <td>
      <div>Object</div>
    </td>
    <td>
      <div class='forty'>Object</div>
    </td>
    <td>
      <div class='thirty'>Object</div>
    </td>
    <td>
      <div class='twenty'>Object</div>
    </td>
  </tr>
</table>

.CSS

table { 
  border-collapse: collapse;
  border-top: 1px double #7F7F7F; 
  width: 160px;
}
table tr {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: 100%;
}
table td {
  display: inline-flex;
  width: 80px;
}
table td + td { border-left: 1px solid #7F7F7F; }
div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  overflow: hidden;
  background: rgba(255,0,0,.4);
}
.forty {
   width: 40px;
   height: 40px;
 }
.thirty {
   width: 30px;
   height: 30px;
}
.twenty {
  width: 20px;
  height: 20px;
}