帶單元格間距但沒有外部空格的全寬度表格

此問題與this one類似，但有一個附加要求：我希望表格在其父級中具有100％的寬度。從這個問題複製的圖像：帶單元格間距但沒有外部空格的全寬度表格

cellspacing image

所以我想「綠色部分」擔起父母的寬度爲100％，並與細胞之間的間距黃色。

至少在大多數情況下，我們可以使用表格上的負邊距'撤消'紅色間距。

但是，這並不總是適用於流體佈局。實際上，只要有足夠的內容使桌子佔用100％的寬度（表格有width:auto），它就可以正常工作。問題出現在沒有足夠內容的情況下，因爲明顯的解決方案width:100%沒有解決這個問題：表格將足夠寬以適應包含邊框間距的父項，但是我們將其剝離，所以表格已經不夠寬了。

到目前爲止，我發現的唯一'解決方案'是用長的，最好是不可見的內容強制填充表格，以便它填滿'真實'100％。但我希望爲此提供一個純粹的css解決方案......我還不想使用計算/表達式來獲得儘可能大的瀏覽器支持。

body {padding: 1em} 
 
section {background-color: yellow} 
 
table {background-color: pink} 
 
td {background-color: lightgreen} 
 

 
table {border-spacing: 1em} 
 

 
table.working, table.failing {margin: -1em;} 
 
table.failing {width: 100%}

<body> 
 
    <section> 
 
    <h2>Simple table</h2> 
 
    <table> 
 
     <tr> 
 
     <td>cell 1</td> 
 
     <td>cell 2</td> 
 
     </tr> 
 
    </table> 
 
    
 
    <br> 
 
    
 
    <h2>Succesful "100% width" for both cells</h2> 
 
    <table class="working"> 
 
     <tr> 
 
     <td>cell with a lot of content to make sure that the table will be wide enough</td> 
 
     <td>cell with a lot of content to make sure that the table will be wide enough</td> 
 
     </tr> 
 
    </table> 
 
    
 
    <br> 
 
    
 
    <h2>Unsuccesful 100% width</h2> 
 
    <table class="failing"> 
 
     <tr> 
 
     <td>table with</td> 
 
     <td>100% width</td> 
 
     </tr> 
 
    </table> 
 
    
 
    <br> 
 
    
 
    </section> 
 
    </body>

來源

2016-08-11 Sygmoral

Flexbox的一個選項嗎？ – j08691

@ j08691非常好的一點......我忘記了這個選項，因爲瀏覽器的支持是平均的，但我想現在沒問題。我的特殊問題可以通過父母上的「justify-content：space-between」來解決。儘管我不能明確地設置「之間的空間」的大小，因爲它是從兒童的大小開始的。但我相信它可以調整好看，所以它肯定是一個很好的選擇（隨意添加它作爲答案）。我現在將留下這個問題，因爲我很好奇它是否可以在flexbox之前完成。如果不是......那就是。 – Sygmoral

對於這個實現，你需要手動處理一些CSS。

body {padding: 1em} 
 
section {background-color: yellow;} 
 
table {background-color: pink;} 
 
td {background-color: lightgreen} 
 

 
table {border-spacing:0;} 
 

 
table.working, 
 
/*table.failing {margin: -1em;}*/ 
 
table.failing {width: 100%; margin:0;} 
 
table tr td{ 
 
    border:5px solid #ff0000; 
 
    padding:10px; 
 
} 
 
.no-top{ 
 
    border-top:none; 
 
} 
 
.no-bottom{ 
 
    border-bottom:none; 
 
} 
 
.no-left{ 
 
    border-left:none; 
 
} 
 
.no-right{ 
 
    border-right:none; 
 
}

<body> 
 
    <section> 
 
    <h2>Simple table</h2> 
 
    <table cellpadding="0"> 
 
     <tr> 
 
     <td>cell 1</td> 
 
     <td>cell 2</td> 
 
     </tr> 
 
    </table> 
 
    
 
    <br> 
 
    
 
    <h2>Succesful "100% width" for both cells</h2> 
 
    <table class="working"> 
 
     <tr> 
 
     <td>cell with a lot of content to make sure that the table will be wide enough</td> 
 
     <td>cell with a lot of content to make sure that the table will be wide enough</td> 
 
     </tr> 
 
    </table> 
 
    
 
    <br> 
 
    
 
    <h2>Unsuccesful 100% width</h2> 
 
    <table class="failing"> 
 
     <tr> 
 
     <td class="no-top no-left">table with</td> 
 
     <td class="no-top no-right">100% width</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="no-bottom no-left">table with</td> 
 
     <td class="no-bottom no-right">100% width</td> 
 
     </tr> 
 
    </table> 
 
    
 
    <br> 
 
    
 
    </section> 
 
    </body>

來源

2016-08-11 15:19:08 jonju

沒錯，但那樣紅色填充仍然存在。我不想要紅色填充，換句話說，我希望綠色的邊緣與黃色的邊緣對齊。 – Sygmoral

（在我的評論開始時，我正在談論我不想要的表格邊緣的紅色填充，單元格之間的填充是我想要保留的唯一填充） – Sygmoral

請檢查新答案。。您正在設置邊框間距：1em，導致粉紅色填充。 – jonju

帶單元格間距但沒有外部空格的全寬度表格

回答

相關問題