HTML Tables: Slicky header and the last column auto width

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>

edited Nov 14 '18 at 13:05

asked Nov 14 '18 at 12:59

Serge

3,14733886

1

This is due to tbody { display: block; } - by robbing the tbody of its normal table-row-group display, you are basically preventing the usual table layout algorithm to work from here on … so cells with width:auto won’t grow any more to fill left-over space.

– misorude
Nov 14 '18 at 13:08

@misorude thanks, that is great, to know the cause... however, the problem remains... i don't specially need the tbody to be block displayed... but i need sticky headers

– Serge
Nov 14 '18 at 13:09

Agree with @misorude comment, why you want to make tbody display as block?

– RGhanbari
Nov 14 '18 at 13:18

@RGhanbari because otherwise overflow won’t work.

– misorude
Nov 14 '18 at 13:22

nor position relative, I suppose... @RGhanbari, please see my comment above yours

– Serge
Nov 14 '18 at 13:29

add a comment |

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>

edited Nov 14 '18 at 13:05

asked Nov 14 '18 at 12:59

Serge

3,14733886

1

This is due to tbody { display: block; } - by robbing the tbody of its normal table-row-group display, you are basically preventing the usual table layout algorithm to work from here on … so cells with width:auto won’t grow any more to fill left-over space.

– misorude
Nov 14 '18 at 13:08

@misorude thanks, that is great, to know the cause... however, the problem remains... i don't specially need the tbody to be block displayed... but i need sticky headers

– Serge
Nov 14 '18 at 13:09

Agree with @misorude comment, why you want to make tbody display as block?

– RGhanbari
Nov 14 '18 at 13:18

@RGhanbari because otherwise overflow won’t work.

– misorude
Nov 14 '18 at 13:22

nor position relative, I suppose... @RGhanbari, please see my comment above yours

– Serge
Nov 14 '18 at 13:29

add a comment |

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>

edited Nov 14 '18 at 13:05

asked Nov 14 '18 at 12:59

Serge

3,14733886

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>

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>

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>

html css css3 html-table

edited Nov 14 '18 at 13:05

asked Nov 14 '18 at 12:59

Serge

3,14733886

edited Nov 14 '18 at 13:05

asked Nov 14 '18 at 12:59

Serge

3,14733886

edited Nov 14 '18 at 13:05

asked Nov 14 '18 at 12:59

Serge

3,14733886

asked Nov 14 '18 at 12:59

Serge

3,14733886

asked Nov 14 '18 at 12:59

Serge

3,14733886

1

This is due to tbody { display: block; } - by robbing the tbody of its normal table-row-group display, you are basically preventing the usual table layout algorithm to work from here on … so cells with width:auto won’t grow any more to fill left-over space.

– misorude
Nov 14 '18 at 13:08

@misorude thanks, that is great, to know the cause... however, the problem remains... i don't specially need the tbody to be block displayed... but i need sticky headers

– Serge
Nov 14 '18 at 13:09

Agree with @misorude comment, why you want to make tbody display as block?

– RGhanbari
Nov 14 '18 at 13:18

@RGhanbari because otherwise overflow won’t work.

– misorude
Nov 14 '18 at 13:22

nor position relative, I suppose... @RGhanbari, please see my comment above yours

– Serge
Nov 14 '18 at 13:29

add a comment |

1

This is due to tbody { display: block; } - by robbing the tbody of its normal table-row-group display, you are basically preventing the usual table layout algorithm to work from here on … so cells with width:auto won’t grow any more to fill left-over space.

– misorude
Nov 14 '18 at 13:08

@misorude thanks, that is great, to know the cause... however, the problem remains... i don't specially need the tbody to be block displayed... but i need sticky headers

– Serge
Nov 14 '18 at 13:09

Agree with @misorude comment, why you want to make tbody display as block?

– RGhanbari
Nov 14 '18 at 13:18

@RGhanbari because otherwise overflow won’t work.

– misorude
Nov 14 '18 at 13:22

nor position relative, I suppose... @RGhanbari, please see my comment above yours

– Serge
Nov 14 '18 at 13:29

This is due to tbody { display: block; } - by robbing the tbody of its normal table-row-group display, you are basically preventing the usual table layout algorithm to work from here on … so cells with width:auto won’t grow any more to fill left-over space.

– misorude
Nov 14 '18 at 13:08

@misorude thanks, that is great, to know the cause... however, the problem remains... i don't specially need the tbody to be block displayed... but i need sticky headers

– Serge
Nov 14 '18 at 13:09

Agree with @misorude comment, why you want to make tbody display as block?

– RGhanbari
Nov 14 '18 at 13:18

@RGhanbari because otherwise overflow won’t work.

– misorude
Nov 14 '18 at 13:22

nor position relative, I suppose... @RGhanbari, please see my comment above yours

– Serge
Nov 14 '18 at 13:29

add a comment |

2 Answers
2

active

oldest

votes

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  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>

edited Nov 14 '18 at 14:45

answered Nov 14 '18 at 13:21

enxaneta

7,6842518

1

I just removed the thead or tbody to let the generic tr {display: block; position: relative;}

– Serge
Nov 14 '18 at 13:27

also there is no need of table-layout: fixed, in that case...

– Serge
Nov 14 '18 at 13:34

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"

– Serge
Nov 14 '18 at 14:01

I suppose you understand that the long text could appear anywhere, so, you suppose to put the span in every "td"... could not be so readable in the code (peoplea reading the code could ask theiself what for is that "span"?)

– Serge
Nov 14 '18 at 14:55

add a comment |

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/

answered Nov 14 '18 at 13:27

David Johns

10111

thanks, I don't see any scroll on the tbody and limited height (300px)...

– Serge
Nov 14 '18 at 14:05

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53300840%2fhtml-tables-slicky-header-and-the-last-column-auto-width%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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  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>

edited Nov 14 '18 at 14:45

answered Nov 14 '18 at 13:21

enxaneta

7,6842518

1

I just removed the thead or tbody to let the generic tr {display: block; position: relative;}

– Serge
Nov 14 '18 at 13:27

also there is no need of table-layout: fixed, in that case...

– Serge
Nov 14 '18 at 13:34

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"

– Serge
Nov 14 '18 at 14:01

I suppose you understand that the long text could appear anywhere, so, you suppose to put the span in every "td"... could not be so readable in the code (peoplea reading the code could ask theiself what for is that "span"?)

– Serge
Nov 14 '18 at 14:55

add a comment |

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  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>

edited Nov 14 '18 at 14:45

answered Nov 14 '18 at 13:21

enxaneta

7,6842518

1

I just removed the thead or tbody to let the generic tr {display: block; position: relative;}

– Serge
Nov 14 '18 at 13:27

also there is no need of table-layout: fixed, in that case...

– Serge
Nov 14 '18 at 13:34

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"

– Serge
Nov 14 '18 at 14:01

I suppose you understand that the long text could appear anywhere, so, you suppose to put the span in every "td"... could not be so readable in the code (peoplea reading the code could ask theiself what for is that "span"?)

– Serge
Nov 14 '18 at 14:55

add a comment |

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  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>

edited Nov 14 '18 at 14:45

answered Nov 14 '18 at 13:21

enxaneta

7,6842518

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  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>

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>

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>

edited Nov 14 '18 at 14:45

answered Nov 14 '18 at 13:21

enxaneta

7,6842518

edited Nov 14 '18 at 14:45

answered Nov 14 '18 at 13:21

enxaneta

7,6842518

answered Nov 14 '18 at 13:21

enxaneta

7,6842518

answered Nov 14 '18 at 13:21

enxaneta

7,6842518

1

I just removed the thead or tbody to let the generic tr {display: block; position: relative;}

– Serge
Nov 14 '18 at 13:27

also there is no need of table-layout: fixed, in that case...

– Serge
Nov 14 '18 at 13:34

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"

– Serge
Nov 14 '18 at 14:01

I suppose you understand that the long text could appear anywhere, so, you suppose to put the span in every "td"... could not be so readable in the code (peoplea reading the code could ask theiself what for is that "span"?)

– Serge
Nov 14 '18 at 14:55

add a comment |

1

I just removed the thead or tbody to let the generic tr {display: block; position: relative;}

– Serge
Nov 14 '18 at 13:27

also there is no need of table-layout: fixed, in that case...

– Serge
Nov 14 '18 at 13:34

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"

– Serge
Nov 14 '18 at 14:01

I suppose you understand that the long text could appear anywhere, so, you suppose to put the span in every "td"... could not be so readable in the code (peoplea reading the code could ask theiself what for is that "span"?)

– Serge
Nov 14 '18 at 14:55

I just removed the thead or tbody to let the generic tr {display: block; position: relative;}

– Serge
Nov 14 '18 at 13:27

also there is no need of table-layout: fixed, in that case...

– Serge
Nov 14 '18 at 13:34

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"

– Serge
Nov 14 '18 at 14:01

I suppose you understand that the long text could appear anywhere, so, you suppose to put the span in every "td"... could not be so readable in the code (peoplea reading the code could ask theiself what for is that "span"?)

– Serge
Nov 14 '18 at 14:55

add a comment |

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/

answered Nov 14 '18 at 13:27

David Johns

10111

thanks, I don't see any scroll on the tbody and limited height (300px)...

– Serge
Nov 14 '18 at 14:05

add a comment |

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/

answered Nov 14 '18 at 13:27

David Johns

10111

thanks, I don't see any scroll on the tbody and limited height (300px)...

– Serge
Nov 14 '18 at 14:05

add a comment |

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/

answered Nov 14 '18 at 13:27

David Johns

10111

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/

answered Nov 14 '18 at 13:27

David Johns

10111

answered Nov 14 '18 at 13:27

David Johns

10111

answered Nov 14 '18 at 13:27

David Johns

10111

answered Nov 14 '18 at 13:27

David Johns

10111

thanks, I don't see any scroll on the tbody and limited height (300px)...

– Serge
Nov 14 '18 at 14:05

add a comment |

thanks, I don't see any scroll on the tbody and limited height (300px)...

– Serge
Nov 14 '18 at 14:05

thanks, I don't see any scroll on the tbody and limited height (300px)...

– Serge
Nov 14 '18 at 14:05

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky