2

This question is similar to this one, but with an added requirement: I want the table to have 100% width inside its parent. Copied image from that question:

cellspacing image

So I want the "green part" to take up 100% width of the parent, and with the yellow spacing between cells.

We can use negative margin on the table to 'undo' the red spacing, at least for most cases.

However, that does not always work with fluid layouts. Actually it works fine as long as there is enough content to make the table take up 100% width (with the table having width:auto). The problem arises when there is not enough content to do that, because the obvious solution width:100% does not fix that: the table will be wide enough to fit the parent with the border spacing included, but we're stripping that off, so the table is not wide enough anymore.

The only 'solution' I have found so far is force-filling the table with long, preferably invisible, content so that it will fill up to 'real' 100%. But I wish for a pure-css solution for this... I'd also prefer not using calculations / expressions to have as large browser support as possible.

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>
Community
  • 1
  • 1
Sygmoral
  • 7,021
  • 2
  • 23
  • 31
  • 1
    Flexbox an option here? – j08691 Aug 11 '16 at 15:16
  • @j08691 Very good point... I had forgotten about that option because browser support was average, but I guess it's okay now. My particular issue can be solved with `justify-content: space-between` on the parent. I can't explicitly set the size of the "space between" though, as it works from the size of the children. But I'm sure it can be tweaked to look good, so it's certainly a good option (feel free to add it as an answer). I will leave the question open for now because I'm curious whether it can be done pre-flexbox. If not... flebox it is. – Sygmoral Aug 11 '16 at 22:08

1 Answers1

0

For this to achieve you need to handle some css manually.

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>
jonju
  • 2,711
  • 1
  • 13
  • 19
  • Right, but that way the red padding is still there. I don't want the red padding, in other words, I want the edges of the green to be aligned with the edges of the yellow. – Sygmoral Aug 11 '16 at 21:49
  • (At the start of my comment, I'm talking about the red padding at the edges of the table that I don't want. The padding between the cells are the only ones I want to keep) – Sygmoral Aug 11 '16 at 22:10
  • Check the answer new..You were setting border-spacing:1em that cause the pink padding. – jonju Aug 12 '16 at 03:41
  • But now the padding between the cells is also gone :) I do want the padding *between* the cells, but I do not want the padding *at the edge* of the table. Please check the second case in my original code snippet: that is how I want it. But it might not be possible for tables with too little content. – Sygmoral Aug 12 '16 at 10:16
  • do you mean padding inside cell(td)? – jonju Aug 12 '16 at 10:36
  • the red border is the border color of the cell not parent. – jonju Aug 12 '16 at 10:45
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/120816/discussion-between-sygmoral-and-jonju). – Sygmoral Aug 12 '16 at 15:03