具有单元格间距但没有外部间距的全宽表格答案

【问题标题】：Full-width table with cell spacing, but no outer spacing具有单元格间距但没有外部间距的全宽表格
【发布时间】：2016-12-18 10:03:58
【问题描述】：

这个问题类似于this one，但有一个附加要求：我希望表格在其父表格内具有 100% 的宽度。从该问题复制的图像：

所以我希望“绿色部分”占据父级的 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>

【问题讨论】：

Flexbox 选项在这里？
@j08691 非常好的点...我忘记了那个选项，因为浏览器支持是平均的，但我想现在还可以。我的特殊问题可以通过父级上的justify-content: space-between 来解决。不过，我不能明确设置“之间的空间”的大小，因为它是根据孩子的大小来工作的。但我确信它可以调整为看起来不错，所以它肯定是一个不错的选择（随意添加它作为答案）。我暂时将这个问题留待解决，因为我很好奇它是否可以在 flexbox 之前完成。如果不是......它是弹性盒子。

标签： html css cell css-tables border-spacing

【解决方案1】：

为此，您需要手动处理一些 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>

【讨论】：

对，但是这样红色的填充仍然存在。我不希望红色填充，换句话说，我希望绿色的边缘与黄色的边缘对齐。
（在我的评论开头，我说的是我不想要的表格边缘的红色填充。单元格之间的填充是我想要保留的唯一填充)
检查答案新的..您设置了导致粉红色填充的border-spacing:1em。
但是现在单元格之间的填充也消失了 :) 我确实想要填充 between 单元格，但我不希望填充 在边缘的表。请检查我原始代码 sn-p 中的第二种情况：这就是我想要的。但是对于内容太少的表格可能无法使用。
你的意思是在单元格内填充（td）吗？