在表格中使用固定填充和百分比寬度

Question

如何使用百分比寬度和爲每個元素填充固定數量的填充的表格中的元素大小如何？

具體而言，我希望除了最後一列以外的所有列都有padding-right: 20px，我想用百分比來確定列的寬度。我認爲，（實際上SCSS）以下的CSS將做到這一點：

table { 
    width: 200px; 
    table-layout: fixed; 
    colgroup { 
     .c1 { 
      width: 50%; 
     } 
     .c2 { 
      width: 40%; 
     } 
    } 
    td { 
     border: 0px; 
     padding-left: 0px; 
     padding-right: 20px; 
     word-break: break-all; 
    } 
    td:last-child { 
     padding-right: 0px; 
    } 
} 

下面是上面一個的jsfiddle： https://jsfiddle.net/speedplane/w0aLar56/4/

的SCSS應該導致與加起來200像素列的表，但在Chrome瀏覽器中，它們只能添加192px，在Firefox上它們最多可以添加196px。我顯然做錯了什麼。

如何設置固定填充和百分比寬度表格單元格？

Answer 1

我猜想不同的瀏覽器對於border-spacing有不同的默認值，因爲表上的border-spacing: 0px;似乎可以解決它。