2

I'm currently trying to emulate the flexbox space-between layout using the table model. Basically, I have a table that is set to 100% the width of it's container, cells that have a fixed pixel width and I would like the border-spacing to "fill" the space remaining. So far, setting the table's width to 100% overrides the fixed width of the cells and this is not what I want. Is this even possible?

I'd obviously prefer to use a true flexbox to do this, but the project I'm working on must work on older versions of IE so that is not an option.

Thanks for your time.

Erik Philips
  • 53,428
  • 11
  • 128
  • 150
Al Benoit
  • 23
  • 3
  • 1
    Welcome to Stack Overflow! Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself.** – Paulie_D May 27 '15 at 16:08
  • Possible duplicate - http://stackoverflow.com/questions/11589590/text-align-justify-inline-block-elements-properly – Paulie_D May 27 '15 at 16:15

1 Answers1

0

You can add empty table-cell elements between the real cells. Those empty cells will grow to fill the available space.

/* Tabular displays */
.table        { display: table;      }
.row          { display: table-row;  }
.cell, .space { display: table-cell; }
/* Widths */
.table                { width: 100%;  }
.cell                 { width: 100px; }
.cell ~ .cell         { width: 150px; }
.cell ~ .cell ~ .cell { width: 200px; }
/* Borders */
.table { border-collapse: collapse; }
.cell  { border: 1px solid;         }
<div class="table">
  <div class="row">
    <div class="cell">100px</div>
    <span class="space"></span>
    <div class="cell">150px</div>
    <span class="space"></span>
    <div class="cell">200px</div>
  </div>
  <div class="row">
    <div class="cell">100px</div>
    <span class="space"></span>
    <div class="cell">150px</div>
    <span class="space"></span>
    <div class="cell">200px</div>
  </div>
</div>
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • Thank you! I'm a bit concerned about the semantic implications of having empty elements in the markup but that will have to do. – Al Benoit May 27 '15 at 19:58