Fluent table width

Question

This behaviour is a little weird, I think.

I have such a structure

        <div class="canvas">
            <div class="table">
                <div class="row">

                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>

                </div>
            </div>
        </div>

Where .table, .row, .cell are display:table, table-row and table-cell.

Say a cell has a fixed width of 100px and the canvas has a width of 250px and overflow:hidden, the last cell in the row will break down. The table seems to inherit the width of the canvas. Never defined it anywhere.

1. Why is table not just simply growing with it cells? I mean it's a table, I don't want rows to break. If I wanted that, I would use divs.

2. How can I get the table to behave like I expected?

Thanks.

Answer 1

Consider these 3 samples, the first 2 have a surrounding div where the last of those 2 is using "min-width" and the last (3:rd) without any div.

All 3 "groups" have a div with display: table and a normal table element.

As far as I can see, they all behave as they supposed to, so to answer your question(s):

1. It's correct that there isn't a defined width on the table, but there is one on its parent, which then sets a boundary to which the table try to adapt. There is also a width set to a cell, which it tries to adapt to. This should make (and obviously does) the table's cells to break line.

   If one would remove all the width/min-width: *px then it will start to grow, as I guess you expected, but only until it hits the next boundary, which in this case is the body, and when there, it will start break line again.

2. How do you expect them to behave?

.canvas {
  width: 250px;
  overflow: hidden;
}
.canvas.min-width {
  width: auto;
  min-width: 250px;
}
.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  width: 100px;
  vertical-align: top;
}

<div class="canvas">
  <div class="table">
    <div class="row">

      <div class="cell"> Heyyyy </div>
      <div class="cell"> Heyyyyy 2 </div>
      <div class="cell"> Heyyyyyy 33333333 44444444444 5555555555555555</div>

    </div>
  </div>

  <table>
    <tr>
      <td class="cell"> Heyyyy </td>
      <td class="cell"> Heyyyyy 2 </td>
      <td class="cell"> Heyyyyyy 33333333 44444444444 5555555555555555</td>
    </tr>
  </table>
</div>
<hr />
<div class="canvas min-width">
  <div class="table">
    <div class="row">

      <div class="cell"> Heyyyy </div>
      <div class="cell"> Heyyyyy 2 </div>
      <div class="cell"> Heyyyyyy 33333333 44444444444 5555555555555555</div>

    </div>
  </div>

  <table>
    <tr>
      <td class="cell"> Heyyyy </td>
      <td class="cell"> Heyyyyy 2 </td>
      <td class="cell"> Heyyyyyy 33333333 44444444444 5555555555555555</td>
    </tr>
  </table>
</div>
<hr />
  <div class="table">
    <div class="row">

      <div class="cell"> Heyyyy </div>
      <div class="cell"> Heyyyyy 2 </div>
      <div class="cell"> Heyyyyyy 33333333 44444444444 5555555555555555</div>

    </div>
  </div>

  <table>
    <tr>
      <td class="cell"> Heyyyy </td>
      <td class="cell"> Heyyyyy 2 </td>
      <td class="cell"> Heyyyyyy 33333333 44444444444 5555555555555555</td>
    </tr>
  </table>