带单元格间距但没有外部空格的全宽度表格

此问题与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

带单元格间距但没有外部空格的全宽度表格

回答

相关问题