How can I let a table cell take in the full width of the table with css?

css, display, html

Solution

With CSS you can build a table using a table element and then style how you want using display: block and inline-block. Though if your need really is as simple as it appears to be then a simple colspan will do the jobs.

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="4"></td>
  </tr>
</table>

Problem

For some reason the cells in my second row in my table are changing the width of the cells in the row above. I have no idea why this is the cause. I don't want the width of the first cell in the first row to be changed. I have reproduced the problem in jsfiddle to make it clear what I mean. FiddleJS link: https://jsfiddle.net/bpyrgsvc/1/ HTML: ``` <div class="table"> <div class="row"> <div class="cell">test</div> <div class="cell">test</div> <div class="cell">test</div> <div class="cell">test</div> <div class="cell">test</div> </div> <div class="row"> <div class="cell">this changes the width of the cell above</div> </div> </div> ``` CSS: ``` .table { display:table; } .row { display: table-row; } .cell { display: table-cell; padding: 5px; border: 1px solid black; } ```

Original source