Rectangle 27 3

table-layout:fixed;

from table style, and that seems to make col have a min-width...

html - Table min-max-width ignored - Stack Overflow

html css
Rectangle 27 240

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    
    
    
    <!-- Put <thead>, <tbody>, and <tr>'s here! -->
    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

Does it work for HTML5 ?

@Zulu. Yes, width is specified in CSS style.

Like the cleanliness of this solution. However, please close out the col e.g <col span="1" style="width: 15%;" /> or <col span="1" style="width: 15%;"></col>

@Isu_guy you only close <col> when using XHTML -- in HTML, <col> tag has no closing... see link for more info. In HTML5, <col> is a void element, meaning it MUST NOT be closed

@Caltor: the code is not using the <col> width attribute; it is using a CSS *style* width, which is what replaced the <col> width attribute. (despite the multiple people up-voting that comment!!)

html - Setting table column width - Stack Overflow

html css html-table
Rectangle 27 240

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    
    
    
    <!-- Put <thead>, <tbody>, and <tr>'s here! -->
    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

Does it work for HTML5 ?

@Zulu. Yes, width is specified in CSS style.

Like the cleanliness of this solution. However, please close out the col e.g <col span="1" style="width: 15%;" /> or <col span="1" style="width: 15%;"></col>

@Isu_guy you only close <col> when using XHTML -- in HTML, <col> tag has no closing... see link for more info. In HTML5, <col> is a void element, meaning it MUST NOT be closed

@Caltor: the code is not using the <col> width attribute; it is using a CSS *style* width, which is what replaced the <col> width attribute. (despite the multiple people up-voting that comment!!)

html - Setting table column width - Stack Overflow

html css html-table
Rectangle 27 482

Table with Fixed Width

In order to make <tbody> element scrollable, we need to change the way it's displayed on the page i.e. using display: block; to display that as a block level element.

Since we change the display property of tbody, we should change that property for thead element as well to prevent from breaking the table layout.

thead, tbody { display: block; }

tbody {
    height: 100px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}
thead
tbody
table-header-group
table-row-group

Once we change that, the inside tr elements doesn't fill the entire space of their container.

In order to fix that, we have to calculate the width of tbody columns and apply the corresponding value to the thead columns via JavaScript.

Here is the jQuery version of above logic:

// Change the selector if needed
var $table = $('table'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
    return $(this).width();
}).get();

// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
    $(v).width(colWidth[i]);
});

As the Original Poster needed, we could expand the table to 100% of width of its container, and then using a relative (Percentage) width for each columns of the table.

table {
    width: 100%; /* Optional */
}

tbody td, thead th {
    width: 20%;  /* Optional */
}

Since the table has a (sort of) fluid layout, we should adjust the width of thead columns when the container resizes.

Hence we should set the columns' widths once the window is resized:

// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
    /* Same as before */ 
}).resize(); // Trigger the resize handler once the script runs

The output would be:

I've tested the two above methods on Windows 7 via the new versions of major Web Browsers (including IE10+) and it worked.

in a table layout, all elements should follow the same structural properties.

By using display: block; for the <thead> and <tbody> elements, we've broken the table structure.

One approach is to redesign the (entire) table layout. Using JavaScript to create a new layout on the fly and handle and/or adjust the widths/heights of the cells dynamically.

For instance, take a look at the following examples:

This approach uses two nested tables with a containing div. The first table has only one cell which has a div, and the second table is placed inside that div element.

This works on most of web browsers. We can also do the above logic dynamically via JavaScript.

Since the purpose of adding vertical scroll bar to the <tbody> is displaying the table header at the top of each row, we could position the thead element to stay fixed at the top of the screen instead.

Here is a Working Demo of this approach performed by Julien. It has a promising web browser support.

Here is the old answer. Of course I've added a new method and refined the CSS declarations.

table
width

Each column should have a specific width and the last column of thead element needs a greater width which equals to the others' width + the width of vertical scroll-bar.

Therefore, the CSS would be:

table {
    width: 716px; /* 140px * 5 column + 16px scrollbar width */
    border-spacing: 0;
}

tbody, thead tr { display: block; }

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 140px;
}

thead th:last-child {
    width: 156px; /* 140px + 16px scrollbar width */
}

Here is the output:

In this approach, the table has a width of 100% and for each th and td, the value of width property should be less than 100% / number of cols.

Also, we need to reduce the width of thead as value of the width of vertical scroll-bar.

In order to do that, we need to use CSS3 calc() function, as follows:

table {
    width: 100%;
    border-spacing: 0;
}

thead, tbody, tr, th, td { display: block; }

thead tr {
    /* fallback */
    width: 97%;
    /* minus scroll bar width */
    width: -webkit-calc(100% - 16px);
    width:    -moz-calc(100% - 16px);
    width:         calc(100% - 16px);
}

tr:after {  /* clearing float */
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 19%;  /* 19% is less than (100% / 5 cols) = 20% */
    float: left;
}

Here is the Online Demo.

the content of each cell should be short enough

In the following, there are two simple example of pure CSS solution which I created at the time I answered this question.

With display: block you loose table's properties as column's width shared between thead and tbody. I know you have fixed this by setting width: 19.2% but in case we don't know the width of each column in advance, this won't work.

This code seems to assume the body cells will always be wider than the header cells.

Not working when height: 100% (when you want the table to expand to the bottom of the page).

This also works fantastically with AngularJS ng-repeat tables. Not sure why there are all those libraries with fixed table headers and what not when there's this solution.

You can improve this a little more with the box-sizing property so that having borders of two different thicknesses doesn't throw off the column alignment.

css - HTML table with 100% width, with vertical scroll inside tbody - ...

html css css3 vertical-scrolling
Rectangle 27 473

Table with Fixed Width

In order to make <tbody> element scrollable, we need to change the way it's displayed on the page i.e. using display: block; to display that as a block level element.

Since we change the display property of tbody, we should change that property for thead element as well to prevent from breaking the table layout.

thead, tbody { display: block; }

tbody {
    height: 100px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}
thead
tbody
table-header-group
table-row-group

Once we change that, the inside tr elements doesn't fill the entire space of their container.

In order to fix that, we have to calculate the width of tbody columns and apply the corresponding value to the thead columns via JavaScript.

Here is the jQuery version of above logic:

// Change the selector if needed
var $table = $('table'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
    return $(this).width();
}).get();

// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
    $(v).width(colWidth[i]);
});

As the Original Poster needed, we could expand the table to 100% of width of its container, and then using a relative (Percentage) width for each columns of the table.

table {
    width: 100%; /* Optional */
}

tbody td, thead th {
    width: 20%;  /* Optional */
}

Since the table has a (sort of) fluid layout, we should adjust the width of thead columns when the container resizes.

Hence we should set the columns' widths once the window is resized:

// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
    /* Same as before */ 
}).resize(); // Trigger the resize handler once the script runs

The output would be:

I've tested the two above methods on Windows 7 via the new versions of major Web Browsers (including IE10+) and it worked.

in a table layout, all elements should follow the same structural properties.

By using display: block; for the <thead> and <tbody> elements, we've broken the table structure.

One approach is to redesign the (entire) table layout. Using JavaScript to create a new layout on the fly and handle and/or adjust the widths/heights of the cells dynamically.

For instance, take a look at the following examples:

This approach uses two nested tables with a containing div. The first table has only one cell which has a div, and the second table is placed inside that div element.

This works on most of web browsers. We can also do the above logic dynamically via JavaScript.

Since the purpose of adding vertical scroll bar to the <tbody> is displaying the table header at the top of each row, we could position the thead element to stay fixed at the top of the screen instead.

Here is a Working Demo of this approach performed by Julien. It has a promising web browser support.

Here is the old answer. Of course I've added a new method and refined the CSS declarations.

table
width

Each column should have a specific width and the last column of thead element needs a greater width which equals to the others' width + the width of vertical scroll-bar.

Therefore, the CSS would be:

table {
    width: 716px; /* 140px * 5 column + 16px scrollbar width */
    border-spacing: 0;
}

tbody, thead tr { display: block; }

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 140px;
}

thead th:last-child {
    width: 156px; /* 140px + 16px scrollbar width */
}

Here is the output:

In this approach, the table has a width of 100% and for each th and td, the value of width property should be less than 100% / number of cols.

Also, we need to reduce the width of thead as value of the width of vertical scroll-bar.

In order to do that, we need to use CSS3 calc() function, as follows:

table {
    width: 100%;
    border-spacing: 0;
}

thead, tbody, tr, th, td { display: block; }

thead tr {
    /* fallback */
    width: 97%;
    /* minus scroll bar width */
    width: -webkit-calc(100% - 16px);
    width:    -moz-calc(100% - 16px);
    width:         calc(100% - 16px);
}

tr:after {  /* clearing float */
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 19%;  /* 19% is less than (100% / 5 cols) = 20% */
    float: left;
}

Here is the Online Demo.

the content of each cell should be short enough

In the following, there are two simple example of pure CSS solution which I created at the time I answered this question.

With display: block you loose table's properties as column's width shared between thead and tbody. I know you have fixed this by setting width: 19.2% but in case we don't know the width of each column in advance, this won't work.

This code seems to assume the body cells will always be wider than the header cells.

Not working when height: 100% (when you want the table to expand to the bottom of the page).

This also works fantastically with AngularJS ng-repeat tables. Not sure why there are all those libraries with fixed table headers and what not when there's this solution.

You can improve this a little more with the box-sizing property so that having borders of two different thicknesses doesn't throw off the column alignment.

css - HTML table with 100% width, with vertical scroll inside tbody - ...

html css css3 vertical-scrolling
Rectangle 27 84

Max-width applies to block elements. <table> is neither block nor inline. Ambiguous enough? haha. You can use display:block; max-width:1000px and forget about width:100%. Chrome and Safari follow the rules!

Thanks, that helped me, but is there any source that is more competent than Wiki? I tried to find, but couldn't, would appreciate a lot.

The standards of the elements and such. Sorry, Wiki is good for a brief look. w3.org/2009/cheatsheet or just w3.org altogether.

Thanks, didn't know max width was only for blocks. I wish all browsers rendered pages the same!!

Fiddling with table elements display property seems to be popular advice here at Stack Overflow. If you do so, don't forget it'll no longer be a real tableexpect to see all kind of side effects.

@RobertSiemer - Headers and footers not rendering at the correct position, column misalignments... Everything related to table specific behaviours.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

html - Chrome, Safari ignoring max-width in table - Stack Overflow

html google-chrome safari scaling
Rectangle 27 119

You would do something like this by tapping into the scroll event handler on window, and using another table with a fixed position to show the header at the top of the page.

<table id="header-fixed"></table>
#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});

This will show the table head when the user scrolls down far enough to hide the original table head. It will hide again when the user has scrolled the page up far enough again.

I was thinking of this but what if the header columns' widths change based on the content? Unless the column widths are fixed you could have your header row not line up with the content rows. Just a thought.

this example doesn't work if the column headers' names are shorter than the column data values. Try changing that fiddle to have values like infoooooooo instead of info. I'm thinking some sort of hardcoded width that's set when cloning the table.

This has major limitations, least of which is when trying to use the table in a container other than window. mkoryak.github.io/floatThead has a more generally-applicable solution.

This might help anyone needing dynamic th widths, it what I wound up doing, it's a fork of @AndrewWhitaker: jsfiddle.net/noahkoch/wLcjh/1

@NoahKoch fixed header using your solution can be still not as wide as original head when original cells have padding. I improved your solution to add padding to duplicated cells. JSFiddle's fork: jsfiddle.net/1n23m69u/2

html - Table header to stay fixed at the top when user scrolls it out ...

jquery html table
Rectangle 27 7

td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}

it shows neat table, but content is cut; ie. can't see some words if its big content. overflow:hidden

css - How to force table cell content to wrap? - Stack Overflow

css table html
Rectangle 27 8

<table>
 <colgroup>
  <col width="100px" />
  <col width="200px" />
  <col width="145px" />
 </colgroup>
 <thead>
  <tr>
   <th>My 100px header</th>
   <th>My 200px header</th>
   <th>My 145px header</th>
  </tr>
 </thead>
 <tbody>
  <td>100px is all you get - anything more hides due to overflow.</td>
  <td>200px is all you get - anything more hides due to overflow.</td>
  <td>100px is all you get - anything more hides due to overflow.</td>
 </tbody>
</table>

Then if you apply the styles from the posts above, as follows:

table {
    table-layout: fixed; /* This enforces the "col" widths. */
}
table th, table td {
    overflow: hidden;
    white-space: nowrap;
}

The result gives you nicely hidden overflow throughout the table. Works in latest Chrome, Safari, Firefox and IE. I haven't tested in IE prior to 9 - but my guess is that it will work back as far as 7, and you might even get lucky enough to see 5.5 or 6 support. ;)

html - How to hide Table Row Overflow? - Stack Overflow

html css html-table
Rectangle 27 8

<table>
 <colgroup>
  <col width="100px" />
  <col width="200px" />
  <col width="145px" />
 </colgroup>
 <thead>
  <tr>
   <th>My 100px header</th>
   <th>My 200px header</th>
   <th>My 145px header</th>
  </tr>
 </thead>
 <tbody>
  <td>100px is all you get - anything more hides due to overflow.</td>
  <td>200px is all you get - anything more hides due to overflow.</td>
  <td>100px is all you get - anything more hides due to overflow.</td>
 </tbody>
</table>

Then if you apply the styles from the posts above, as follows:

table {
    table-layout: fixed; /* This enforces the "col" widths. */
}
table th, table td {
    overflow: hidden;
    white-space: nowrap;
}

The result gives you nicely hidden overflow throughout the table. Works in latest Chrome, Safari, Firefox and IE. I haven't tested in IE prior to 9 - but my guess is that it will work back as far as 7, and you might even get lucky enough to see 5.5 or 6 support. ;)

html - How to hide Table Row Overflow? - Stack Overflow

html css html-table
Rectangle 27 8

<table>
 <colgroup>
  <col width="100px" />
  <col width="200px" />
  <col width="145px" />
 </colgroup>
 <thead>
  <tr>
   <th>My 100px header</th>
   <th>My 200px header</th>
   <th>My 145px header</th>
  </tr>
 </thead>
 <tbody>
  <td>100px is all you get - anything more hides due to overflow.</td>
  <td>200px is all you get - anything more hides due to overflow.</td>
  <td>100px is all you get - anything more hides due to overflow.</td>
 </tbody>
</table>

Then if you apply the styles from the posts above, as follows:

table {
    table-layout: fixed; /* This enforces the "col" widths. */
}
table th, table td {
    overflow: hidden;
    white-space: nowrap;
}

The result gives you nicely hidden overflow throughout the table. Works in latest Chrome, Safari, Firefox and IE. I haven't tested in IE prior to 9 - but my guess is that it will work back as far as 7, and you might even get lucky enough to see 5.5 or 6 support. ;)

html - How to hide Table Row Overflow? - Stack Overflow

html css html-table
Rectangle 27 153

You have two ways to do this:

<tr onclick="document.location = 'links.html';">
<tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>
table tr td a {
    display:block;
    height:100%;
    width:100%;
}

To get rid of the dead space between columns:

table tr td {
    padding-left: 0;
    padding-right: 0;
}

Here is a simple demo of the second example: DEMO

Since OP said "only css and html" I assume the accept was for the second answer. Note that if you don't have border=0 you will get a "missing link" gap between the table cells.

IIRC the table cells just have to be collapsed, but can have a border.

The <a> tag doesn't allow any other html elements inside it. Then, How can we link a whole table row which has more table data? Something like this: <tr> <a href=""><td>Text</td><td>.....</a></tr>.. We can't have like this ne?

I would recommend using "display:inline-block" instead of block. With block display, I found that Chrome was ignoring the "height:100%" and not actually making the entire height of the <td> click-able if there are other items in the same row that have a greater height. Making it inline-block fixed that issue, and also a possibly related problem with text getting clipped inside the table elements.

Anchors still has dead space between columns (tested with Google Chrome Version 40.0.2214.115 m)

css - html - table row like a link - Stack Overflow

html css hyperlink html-table
Rectangle 27 152

You have two ways to do this:

<tr onclick="document.location = 'links.html';">
<tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>
table tr td a {
    display:block;
    height:100%;
    width:100%;
}

To get rid of the dead space between columns:

table tr td {
    padding-left: 0;
    padding-right: 0;
}

Here is a simple demo of the second example: DEMO

Since OP said "only css and html" I assume the accept was for the second answer. Note that if you don't have border=0 you will get a "missing link" gap between the table cells.

IIRC the table cells just have to be collapsed, but can have a border.

The <a> tag doesn't allow any other html elements inside it. Then, How can we link a whole table row which has more table data? Something like this: <tr> <a href=""><td>Text</td><td>.....</a></tr>.. We can't have like this ne?

I would recommend using "display:inline-block" instead of block. With block display, I found that Chrome was ignoring the "height:100%" and not actually making the entire height of the <td> click-able if there are other items in the same row that have a greater height. Making it inline-block fixed that issue, and also a possibly related problem with text getting clipped inside the table elements.

Anchors still has dead space between columns (tested with Google Chrome Version 40.0.2214.115 m)

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

css - html - table row like a link - Stack Overflow

html css hyperlink html-table
Rectangle 27 26

Table like structure using the old table tag

Just kidding - or am i not.

<table class="table">
  <tr><th>Id</th>     <th>Name</th>      <th>Email address</th></tr>
  <tr><td>100001</td> <td>Joe</td>       <td>MamiePVillalobos@teleworm.us</td></tr>
  <tr><td>100</td>    <td>Christine</td> <td>ChristineJWilliams@dayrep.com</td></tr>
  <tr><td>1001</td>   <td>John</td>      <td>JohnLMiley@dayrep.com</td></tr>
</table>

In the documentation about the bootstrap grid system i could not find any auto-width building blocks. Everything out of the box has a certain width and a fixed number of columns:

<div class="row">
      <div class="span2">ID</div>
      <div class="span2">Name</div>
      <div class="span8">E-Mail</div>
    </div>
    <div class="row">
      <div class="span2">100001</div>
      <div class="span2">Joe</div>
      <div class="span8">MamiePVillalobos@teleworm.us</div>
    </div>
        <div class="row">
      <div class="span2">100</div>
      <div class="span2">Christine</div>
      <div class="span8">ChristineJWilliams@dayrep.com</div>
    </div>

Therefore i assume that you have to build your own version for a 3-column-table with auto-size.

In my demo the grid-column wraps if the space is to narrow or, if the space is too wide, the columns are stretched.

I updated my demo with a custom class. The creative markup comes close to what you are looking for

<div class="row">
      <div class="spanFl">100000001 <br />
        100
      </div>
      <div class="spanFl">Joe <br/>
          Christine
      </div>
      <div class="spanFl">MamiePVillalobos@teleworm.us <br />
        ChristineJWilliams@dayrep.com
      </div>
  </div>

On tutsplus i found an article using css-3 display:table to set up a table like layout. Unless you use three divs for each row it does not solve row wrapping issues.

#content {  
    display: table;  
}  
#mainContent {  
    display: table-cell;  
    width: 620px;  
    padding-right: 22px;  
}  
aside {  
    display: table-cell;  
    width: 300px;  
}

As far as i understood the bootstrap documentation there is no built-in soultion for a 3-column layout with auto and remaining width. To Quote the responsive design page on bootstrap: "Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries."

Could you elaborate more why you can not use a table?

Why wouldn't you use bootstrap .span as columns, and .row-fluid inside each column to make lines - instead of your creative markup option ? Would be lots of markup, but still proper.

Did you mean like this? jsfiddle.net/m7wd5/4 For shorter text it works fine (see version 3). For long text this leads to wrapping trouble

javascript - How to create a dynamic width column in Twitter Bootstrap...

javascript html css twitter-bootstrap stylesheet
Rectangle 27 38

Well, I was trying to obtain the same effect without resorting to fixed size columns or having a fixed height for the entire table.

The solution I came up with is a hack. It consists of duplicating the entire table then hiding everything but the header, and making that have a fixed position.

<div id="table-container">
<table id="maintable">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>some really long line here instead</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
                <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
                <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
    </tbody>
</table>
<div id="bottom_anchor"></div>
</div>
body { height: 1000px; }
thead{
    background-color:white;
}
function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll>anchor_top && scroll<anchor_bottom) {
    clone_table = $("#clone");
    if(clone_table.length == 0){
        clone_table = $("#maintable").clone();
        clone_table.attr('id', 'clone');
        clone_table.css({position:'fixed',
                 'pointer-events': 'none',
                 top:0});
        clone_table.width($("#maintable").width());
        $("#table-container").append(clone_table);
        $("#clone").css({visibility:'hidden'});
        $("#clone thead").css({'visibility':'visible','pointer-events':'auto'});
    }
    } else {
    $("#clone").remove();
    }
}
$(window).scroll(moveScroll);

Edit: updated the code so that the thead can receive pointer events(so buttons and links in the header still work). This fixes the problem reported by luhfluh and Joe M.

Nice example! Thank you, I'll use it. But wouldn't it perform better by clonning only <thead> and putting it into a <table> tag? You know, there may be a lot of elements in original table.

I tried that first, the problem with that is that the size of the elements in the header depend on the contents of the table. If you have a row with big content the entire column, including the header will grow. If you clone just the thead you lose that information and you don't get the desired effect. See Yzmir Ramirez's comment on the accepted answer. This is the only way I found that works without fixed width columns. It isn't clean, I know, which is I way I said it was a hack.

Oh, I got it. This method is great because it works with fluid columns, I googled a little and couldn't find another one with that functionality. Anywhay, if i'll get it done somehow, I'll mention it here

@luhfluh, yeah, the problem was due to the pointer-events:none in the cloned table. This is used so that clicks go through the clone and to the original table. Reverting it in the header of the cloned table so that the header(and only the header) is clickable fixes the problem. I've updated my post to reflect this :)

html - Table header to stay fixed at the top when user scrolls it out ...

jquery html table
Rectangle 27 46

<tr data-href="site.com/whatever">
$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});

(I know OP want CSS and HTML only, but consider jQuery)

data-href
<table class='tr_link' >
.tr_link{cursor:pointer}

To add the hand effect on hovering, add tr[data-href] { cursor: pointer } to your stylesheets

css - html - table row like a link - Stack Overflow

html css hyperlink html-table
Rectangle 27 46

<tr data-href="site.com/whatever">
$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});

(I know OP want CSS and HTML only, but consider jQuery)

data-href
<table class='tr_link' >
.tr_link{cursor:pointer}

To add the hand effect on hovering, add tr[data-href] { cursor: pointer } to your stylesheets

css - html - table row like a link - Stack Overflow

html css hyperlink html-table
Rectangle 27 22

I was able to fix the problem with changing column widths. I started with Andrew's solution above (thanks so much!) and then added one little loop to set the widths of the cloned td's:

$("#header-fixed td").each(function(index){
    var index2 = index;
    $(this).width(function(index2){
        return $("#table-1 td").eq(index).width();
    });
});

This solves the problem without having to clone the entire table and hide the body. I'm brand new to JavaScript and jQuery (and to stack overflow), so any comments are appreciated.

html - Table header to stay fixed at the top when user scrolls it out ...

jquery html table
Rectangle 27 44

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

Thanks! Doesn't do exactly what the question said (truncate all columns evenly), but the behaviour of this code is what I was looking for.

Also, note that you can eliminate the <col>s by instead prepending the widths to the <td> styles: jsfiddle.net/7CURQ/64

Actually, this seems to spoil the dynamic column sizing of the non-truncated columns. They seem to always be shrunk to minimum width.

html - CSS: Truncate table cells, but fit as much as possible - Stack ...

html css overflow tablelayout
Rectangle 27 19

I wrote a plugin that does this. Ive been working on it for about a year now and I think it handles all the corner cases pretty well:

  • scrolling within a container with overflow
  • scrolling within a window
  • taking care of what happens when you resize the window

great effort, but does not work with IE 10 and has some quirks on resizing windows on firefox23/ubuntu.

FYI: i fixed the issues with IE9 and 10 in the latest version.

probably because he doesnt use jquery... and no - i will not make a version that doesnt use jquery.

I use a simple jQery tablesorter plugin and acording to your FAQ your plugin doesn't like most of the CSS rules like #sortable td { .. } and so. I tried to tweak a little but I couldn't get it to work.

html - Table header to stay fixed at the top when user scrolls it out ...

jquery html table