Question

此问题类似于this one，但增加了一项要求：我希望表格在其父级内部具有100％的宽度。从该问题复制的图像：

cellspacing image

所以我想要＆＃34;绿色部分＆＃34;占据父母的100％宽度，并且细胞之间有黄色间距。

我们可以在表格上使用负边距来撤消＆＃39;红色间距，至少在大多数情况下。

但是，这并不总是适用于流畅的布局。实际上只要有足够的内容使表占用100％宽度（表格为width:auto），它就可以正常工作。当没有足够的内容来做这件事时会出现问题，因为显而易见的解决方案width:100%并没有解决这个问题：表格的宽度足以容纳包含边框间距的父级，但我们正在剥离那个关闭，所以桌子不再宽了。

唯一的解决方案＆＃39;到目前为止，我发现用强力填充桌子的内容是长的，最好是看不见的内容，这样才能填满真实的内容。 100％。但我希望有一个纯粹的css解决方案...我也不希望使用计算/表达式来获得尽可能大的浏览器支持。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

为此，您需要手动处理一些css。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: