CODEWITHSUNDEEP
htmlcss
user1189352
user1189352

Reputation: 3875

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

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>

Upvotes: 0

Views: 3756

Answers (3)

zer00ne
zer00ne

Reputation: 43880

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>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105893

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

Upvotes: 3

Steve Kline
Steve Kline

Reputation: 805

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>

Upvotes: 1

Related Questions