与边框定制透明盒子大约只有对象

Question

http://i.imgur.com/2Vptqde.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; 
}