Table with display: block properties, I would like to create the row widths to 100% but doesn't work

Question

I'm trying to create a table in CSS that's a fixed height with y-scrolling properties. The only problem is when i set:

display: block;

then:

width: 100%;

doesn't work anymore.

<table class="table table-hover table-bordered table-condensed">
    <thead style="display: block;">
        <tr>
            <th style="text-align: center; width: 100%;">  <!-- THIS DOESN'T WORK -->
                PLAYS
            </th>
        </tr>
    </thead>
    <tbody style="display: block; overflow-y: auto;" height="465px;">
        <tr ng-repeat="play in playsArray" ng-click="onSelectPlayTableClick(play)" ng-class="{'tr-rcsorange-selected': play.Selected == true}" style="cursor:pointer;">
            <td>{{play.PlayDescription}}</td>
        </tr>
    </tbody>
</table>

There's no point in making a table into a block, it will loose all of it's behavior that makes it a table in the first place, you might as well save yourself from typing 2 extra letters and use a div. — zer00ne, Jun 01 '16 at 21:59
i dont know how else to make a table with a fixed height and scrolling y-properties with multiple columns.. — user1189352, Jun 01 '16 at 22:08
You place a div within a cell and increase the div's width and height as much as you want. It's easier when `table-layout: fixed` Read the comments in the source of my answer. — zer00ne, Jun 01 '16 at 22:23

score 3 · Answer 1 · edited May 23 '17 at 11:44

To overflow a table, you need first to kill the table-layout prperties:

table, thead,tbody,tr {
  display:block;
  width:100%;
}

then restore it deeper in HTML:

tr {
  display:table;
  table-layout:fixed;
}

from here, scroll can be used :

tbody {
  height:100px;
  overflow:auto;
}

Full snippet/code below

table,
thead,
tbody,
tr {
  display: block;
}
thead {
  margin-right:1em;
  }
tr {
  display: table;
  table-layout: fixed;
  width:100%;
}
tbody {
  height: 100px;
  overflow: auto ; /* eventually : scroll;*/
}
table,
th,
td {
  border: solid;
}

<table>
  <thead>
    <tr>
      <th>head
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>
</table>

some more explanation of the basic code in a similar question How to set tbody height with overflow scroll

this did answer the question very well which was great, but if the thead/th is the same size as the tbody/tr, the sizes are misaligned for some reason.. i'm sure because of the scroll bar — user1189352, Jun 01 '16 at 22:35
@user1189352 see the question linked or add a magin, table or not scrollbar come with a size:) (snippet edited) — G-Cyrillus, Jun 01 '16 at 22:36

zer00ne · Answer 2 · 2016-06-01T22:42:23.650

Use:

table {table-layout: fixed; }

Details are in the source in the comments

SNIPPET

html,

body {

  width: 100%;

  height: 100%;

  overflow: hidden;

  position: relative;

}

table {

  /* A fixed table allows you to control it's width by widdening it's cells */

  table-layout: fixed;

  border: 5px dotted black;

  border-collapse: collapse;

  border-spacing: 0;

  margin: 0;

  padding: 0;

}

thead,

tbody {

  border: 3px dashed blue;

}

th,

td {

  outline: 4px solid red;

}

/* In order to expand a cell, place a div inside the cell */

.spacer1 {

  min-width: 100vw;

}

.spacer2 {

  min-height: 465px;

  height: 1000px;

}

/* Scrolling and overflow can be acheived by wrapping table 
in a block element with overflow: auto/scroll and body
overflow: hidden;
*/

.box {

  overflow-y: auto;

  height: 100vh;

}

<section class="box">
  <table class="table table-hover table-bordered table-condensed">
    <thead>
      <tr>
        <th style="text-align: center;">
          <div class="spacer1">&nbsp;</div>
          PLAYS
        </th>
      </tr>
    </thead>
    <tbody height="465">
      <tr ng-repeat="play in playsArray" ng-click="onSelectPlayTableClick(play)" ng-class="{'tr-rcsorange-selected': play.Selected == true}" style="cursor:pointer;">
        <td>
          <div class="spacer2">{{play.PlayDescription}}</div>
        </td>
      </tr>
    </tbody>
  </table>
</section>

score 1 · Answer 3 · answered Jun 01 '16 at 22:26

Simple, just create a div inside the TH and TD.

<style>
    #cellhead {
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    }
    #cellbody {
    height: 456px;
    cursor: pointer;
    overflow-y: auto;
    }
</style>
<table class="table table-hover table-bordered table-condensed">
  <thead>
    <!-- display: block is a default display parameter, not required. -->
    <tr>
      <th>
        <div id="cellhead">
          PLAYS
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <!-- display: block is a default display parameter, not required. -->
    <tr>
      <td>
        <div id="cellbody" ng-repeat="play in playsArray" ng-click="onSelectPlayTableClick(play)" ng-class="{'tr-rcsorange-selected': play.Selected == true}">
          {{play.PlayDescription}}
        </div>
      </td>
    </tr>
  </tbody>
</table>

Table with display: block properties, I would like to create the row widths to 100% but doesn't work

3 Answers3

SNIPPET