與邊框定製透明盒子大約只有對象

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