HTML Tables: Slicky header and the last column auto width
0
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): 
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
asked Nov 14 '18 at 12:59
SergeSerge
3,21733889
add a comment |
0
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):
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
asked Nov 14 '18 at 12:59
SergeSerge
3,21733889
1
This is due totbody display: block;- by robbing the tbody of its normaltable-row-groupdisplay, you are basically preventing the usual table layout algorithm to work from here on … so cells withwidth:autowon’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 maketbodydisplay asblock?
– 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 |
0
0
0
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):
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
asked Nov 14 '18 at 12:59
SergeSerge
3,21733889
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):
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
html css css3 html-table
asked Nov 14 '18 at 12:59
SergeSerge
3,21733889
asked Nov 14 '18 at 12:59
SergeSerge
3,21733889
edited Nov 14 '18 at 13:05
Serge
asked Nov 14 '18 at 12:59
SergeSerge
3,21733889
asked Nov 14 '18 at 12:59
SergeSerge
3,21733889
asked Nov 14 '18 at 12:59
SergeSerge
3,21733889
3,21733889
1
This is due totbody display: block;- by robbing the tbody of its normaltable-row-groupdisplay, you are basically preventing the usual table layout algorithm to work from here on … so cells withwidth:autowon’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 maketbodydisplay asblock?
– 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 totbody display: block;- by robbing the tbody of its normaltable-row-groupdisplay, you are basically preventing the usual table layout algorithm to work from here on … so cells withwidth:autowon’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 maketbodydisplay asblock?
– 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
1
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
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
@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
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
@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
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
2
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>answered Nov 14 '18 at 13:21
enxanetaenxaneta
9,0202519
1
I just removed the thead or tbody to let the generictr display: block; position: relative;
– Serge
Nov 14 '18 at 13:27
also there is no need oftable-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 |
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/
answered Nov 14 '18 at 13:27
David JohnsDavid 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');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
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>answered Nov 14 '18 at 13:21
enxanetaenxaneta
9,0202519
1
I just removed the thead or tbody to let the generictr display: block; position: relative;
– Serge
Nov 14 '18 at 13:27
also there is no need oftable-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 |
2
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>answered Nov 14 '18 at 13:21
enxanetaenxaneta
9,0202519
1
I just removed the thead or tbody to let the generictr display: block; position: relative;
– Serge
Nov 14 '18 at 13:27
also there is no need oftable-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 |
2
2
2
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>answered Nov 14 '18 at 13:21
enxanetaenxaneta
9,0202519
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>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>answered Nov 14 '18 at 13:21
enxanetaenxaneta
9,0202519
edited Nov 14 '18 at 14:45
answered Nov 14 '18 at 13:21
enxanetaenxaneta
9,0202519
answered Nov 14 '18 at 13:21
enxanetaenxaneta
9,0202519
answered Nov 14 '18 at 13:21
enxanetaenxaneta
9,0202519
9,0202519
1
I just removed the thead or tbody to let the generictr display: block; position: relative;
– Serge
Nov 14 '18 at 13:27
also there is no need oftable-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 generictr display: block; position: relative;
– Serge
Nov 14 '18 at 13:27
also there is no need oftable-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
1
1
I just removed the thead or tbody to let the generic
tr display: block; position: relative;– Serge
Nov 14 '18 at 13:27
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
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
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 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 |
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/
answered Nov 14 '18 at 13:27
David JohnsDavid 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 |
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/
answered Nov 14 '18 at 13:27
David JohnsDavid 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 |
0
0
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/
answered Nov 14 '18 at 13:27
David JohnsDavid 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 JohnsDavid Johns
10111
answered Nov 14 '18 at 13:27
David JohnsDavid Johns
10111
answered Nov 14 '18 at 13:27
David JohnsDavid Johns
10111
answered Nov 14 '18 at 13:27
David JohnsDavid Johns
10111
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
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');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
This is due to
tbody display: block;- by robbing the tbody of its normaltable-row-groupdisplay, you are basically preventing the usual table layout algorithm to work from here on … so cells withwidth:autowon’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
tbodydisplay asblock?– 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