Twitter Bootstrap Question posted in

HTML Tables: Slicky header and the last column auto width-Twitter bootstrap

I don’t arrive (the codepen is here) to auto-width the last column in this table(body), that should have sticky headers (check it on a large screen):
enter image description here

table.fixed-header {
  width: 100%;
  table-layout: fixed;
  border: 1px solid red;
  border-collapse: collapse;
}

thead tr {
  display: block;
  position: relative;
}

tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}

td {
  overflow: hidden;
  text-overflow: ellipsis;
}

th:nth-child(2),
td:nth-child(2) {
  width: 200px;
}

th:nth-child(1),
td:nth-child(1) {
  width: 100px;
}

th:last-child,
td:last-child {
  width: auto;
}

thead,
tbody>tr:nth-child(even) {
  background-color: #ffffff;
}

tbody>tr:nth-child(odd) {
  background-color: lightblue;
}

th,
td {
  padding: 5px;
}

td {
  border-left: 1px solid darkgray;
}

.colored {
  background: lightgreen;
}

caption {
  caption-side: top;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h3>Sticky header example</h3>
  <div class="col-md-10 col-md-offset-1 colored">
    <table class="fixed-header">
      <caption align="top">Requirements: sticky header, fill the remaining container, 3 rows height and vertical scroll</caption>
      <thead>
        <tr>
          <th>Id (100px)</th>
          <th>Name (200px)</th>
          <th>Description (auto)</th>
        </tr>
      </thead>
      <tr>
        <td>654</td>
        <td>name 1</td>
        <td>this is a description</td>
      </tr>
      <tr>
        <td>963</td>
        <td>name 2</td>
        <td>this is the second description</td>
      </tr>
      <tr>
        <td>753</td>
        <td>name 3</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>224</td>
        <td>name 4</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>687</td>
        <td>name 5</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>354</td>
        <td>name 6</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>965</td>
        <td>name 7</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>456</td>
        <td>name 8</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>789</td>
        <td>name 9</td>
        <td>this is the third description</td>
      </tr>
    </table>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Your thead tr has display:block. Add the same rules for the tbody tr

    tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: @table_body_height;
    tr {
      display: block;
      position: relative;
    }
  }

    UPDATE

    The OP made this comment:

    the little problem is that the “name” column now does not support the long names to be truncated and ellipsed, if, say for the “name 2” we put “this is a long long column name”

    In this case I would put the text inside a <span> for example and use the and use the ellipsis on that span: 

    td span {
      display:block;
      white-space: nowrap;
      max-width:150px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    This is the code example:

    table.fixed-header {
  width: 100%;
 
  table-layout: fixed;
  border: 1px solid red;
  border-collapse: collapse;
}

tr {
  display: block;
  position: relative;
}

tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100px;
}

th:nth-child(2),
td:nth-child(2) {
  width: 200px;
  overflow:hidden;
}

td span {
  display:block;
  white-space: nowrap;
  max-width:150px;
  overflow: hidden;
  text-overflow: ellipsis;
}



th:nth-child(1),
td:nth-child(1) {
  width: 100px;
  
}

th:last-child,
td:last-child {
  width: auto;
}

thead,
tbody>tr:nth-child(even) {
  background-color: #ffffff;
}

tbody>tr:nth-child(odd) {
  background-color: lightblue;
}

th,
td {
  padding: 5px;
}

td {
  border-left: 1px solid darkgray;
}

.colored {
  background: lightgreen;
}

caption {
  caption-side: top;
}
    <div class="container">
  <h3>Sticky header example</h3>
  <div class="col-md-10 col-md-offset-1 colored">
    <table class="fixed-header">
      <caption align="top">Requirements: sticky header, fill the remaining container, 3 rows height and vertical scroll</caption>
      <thead>
        <tr>
          <th>Id (100px)</th>
          <th>Name (200px)</th>
          <th>Description (auto)</th>
        </tr>
      </thead>
      <tr>
        <td>654</td>
        <td>name 1</td>
        <td>this is a description</td>
      </tr>
      <tr>
        <td>963</td>
        <td><span>name 2 this is a very very long name</span></td>
        <td>this is the second description</td>
      </tr>
      <tr>
        <td>753</td>
        <td>name 3</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>224</td>
        <td>name 4</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>687</td>
        <td>name 5</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>354</td>
        <td>name 6</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>965</td>
        <td>name 7</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>456</td>
        <td>name 8</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>789</td>
        <td>name 9</td>
        <td>this is the third description</td>
      </tr>
    </table>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Use followings:

    to make last column full width

    tr{
    display : flex;
}

    IE doesn’t support flex. So, add following

    td:last-child{
    flex: 1;
    display: inline-block;
}

    To fill the container for 300px height

    tbody{
    display: inline;
}

    Full code:

    http://jsfiddle.net/j1wfm30d/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search