I want to make my html table to take the full window width in a way that th elements content does not overlap + there are even spacing between column headings (see the picture).
The space must scale with window width up to 0 (all words are hugging each other). How to do it?
big screen example:
small screen example:
By default the spacing between th elements gets proportional to the width of the elements.
If I use table-layout: fixed the width of the columns will be equal, i.e. space between them unti-proportional to width.
P.S. I need to use border-spacing: 0 because I need to highlight full table rows and with positive border-spacing the table background will be visible inbetween cells.
P.P.S. the question is specifically about table layout. I know I can do anything with grid and flex box, but I'm trying to use right tags for right content, and in this case I have a table data, i.e. the solution should work with "display: table".
table {
width: 80%;
background: gray;
}
th {
text-align: left;
}
.auto {
background: #90EE90;
}
.fixed {
table-layout: fixed;
background: #ADD8E6;
}
<table class="auto">
<thead>
<tr>
<th>1</th>
<th>333</th>
<th>999999999</th>
<th>22</th>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
</tbody>
</table>
<table class="fixed">
<thead>
<tr>
<th>1</th>
<th>333</th>
<th>999999999</th>
<th>22</th>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
</tbody>
</table>
A probably a bit hacky only css solution would be to insert empty th/td elements and give them a realive width of 100% / amount of filled columns. Here 4 columns -> gap-width: 25% (use calc() if odd amount)
table {
width: 80%;
border-spacing: 0
}
th {
text-align: left;
}
th,
td {
border: 1px solid teal;
}
.gap {
width: 25%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table>
<thead>
<tr>
<th>1</th>
<th class="gap"></th>
<th>333</th>
<th class="gap"></th>
<th>999999999</th>
<th class="gap"></th>
<th>22</th>
<th class="gap"></th>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td class="gap"></td>
<td>aa</td>
<td class="gap"></td>
<td>aa</td>
<td class="gap"></td>
<td>aa</td>
<td class="gap"></td>
</tr>
</tbody>
</table>
</body>
</html>
My code is this :
<div style="width: 300px;">
<table width="100%" border="2px solid blue">
<tr>
<td style="width:30%">Player</td>
<td style="width:30%">Club</td>
<td style="width:30%">Country</td>
</tr>
<tr>
<td style="width:30%">HazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazard</td>
<td style="width:30%">Chelsea</td>
<td style="width:30%">Belgium</td>
</tr>
<tr>
<td>Ronaldo</td>
<td>Real Madrid</td>
<td>Portugal</td>
</tr>
<tr>
<td>Messi</td>
<td>Barcelona</td>
<td>Argentina</td>
</tr>
</table>
</div>
The result is this :
I tried to add width=30% in the column player, but it's still not working.
it's beacause your text is too large
use this may help you
<style>
table tr td
{
word-break: break-all;
}
</style>
Moob was before me, use word-wrap:break-word; but also use table-layout:fixed
css code
table{
table-layout: fixed;
}
td {
word-wrap:break-word;
}
That's because "HazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazard" is stretching it.
Table cells will stretch to fit their content, and if they can't break, they will keep stretching.
If it was "Hazard hazard..." etc with spaces, it would break as expected. The same would happen if you put a large image in the table cell.
On my website I have a CSS table with two table cells.
One is 400px wide, and I want the other one to take up the rest of the page.
How do I do that? I have tried applying width 100% to it, but that doesn't work on chrome, and width: auto doesn't work at all.
.wrapper{
display: table;
width: 100vw;
max-width: 100vw;
}
[...]
.sidebar{
display: table-cell;
border-right: 1px solid #707070;
width: 400px;
}
[...]
.content{
display: table-cell;
width: 100%;
}
HTML:
<div class="wrapper">
<div class="sidebar">
<!-- Stuff -->
</div>
<div class="content">
<!-- Titles and text, all that usual blog stuff. Oh, and a big, wide header. -->
</div>
</div>
Set your wrapper to be display:table and not display:table-cell because otherwise the wrapper gets an anonymous table wrapper at auto width (shrink to fit for tables).
.wrapper{
display: table;
width: 100%;
table-layout:fixed;
}
I wouldn't use vw for the width either as that includes the scrolbar and will cause a horizontal scrollbar when content is below the fold.
Apply style="width:100%" to the table element, keeping the 400px limit on the first cell. The second cell will expand to meet the table's width.
The table should automatically scale to full width (assuming it's width is 100%), even with one column fixed and the other(s) flexible. I threw up a little test/example # http://jsfiddle.net/41uc6Lsq/1/
<table width="100%">
<thead>
<tr>
<th width="20px">Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
<table width="100%">
<tbody>
<tr>
<td width="20px">1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
EDIT: just saw your CSS edit - could you post the HTML too please?
I have two tables floated side by side in a parent div. The leftmost table has a margin-right of 10%. As you can see in the image, the margin is calculated correctly (in this case, the parent is 850px, and the metrics inspector shows an 85px margin) but when drawn, is incorrect (much smaller.)
Resizing the window to make it redraw immediately fixes it. What is going on here!?
HTML:
<table id="subscriptions" class="data">
<tr>
<th colspan="2">Subscriptions
<span id="remaining">Remaining</span></th>
<th></th>
</tr>
<tr>
<td>Spin Classes</td>
<td class="right">3</td>
<td class="right">Redeem</td>
</tr>
<tr>
<td>Spin Classes</td>
<td class="right">3</td>
<td class="right">Redeem</td>
</tr>
</table>
<table id="redeemed" class="data">
<tr>
<th>Redeemed Items</th>
<th class="right">Redeemed</th>
</tr>
<tr>
<td>Spin Class</td>
<td class="right">3/3/13</td>
</tr>
<tr>
<td>Spin Class</td>
<td class="right">3/3/13</td>
</tr>
</table>
CSS:
#subscriptions, #redeemed {
width: 45%;
float: left;
clear: both;
margin: 25px 10% 0 0;
}
#redeemed {
clear: none;
margin-right: 0;
}
I think if you get rid of both the clear lines in the css it might fix it?
I am trying to design a page where there are some tables. It seems that styling tables is much more painful than it ought to be.
The problem is the following: The tables should have a fixed height and display either white space at the bottom (when there is too little content) or a vertical scrollbar (when there is too much). Add to this that the tables have a header which should not scroll.
As far as I know, the thead not scrolling is the default behaviour for tables. And a stretching tfoot could serve well for the purpose of filling with white space. Sadly, it seems that every constraint I can put on the table height is cheerfully ignored. I have tried
table {
height: 600px;
overflow: scroll;
}
I have tried with max-height. I have tried to position the table absolutely and give both the top and bottom coordinates. I have tried to manually edit the height in Firebug to see if it was a problem with CSS specificity. I have tried to set the height on the tbody too. Fact is, the table always stays exactly the same height as its content, regardless of my efforts.
Of course I could fake a table with a div structure, but it actually is a table, and I fear using divs I may run into an issue where some columns may not be properly aligned.
How am I supposed to give a table a height?
NOTE this answer is now incorrect. I may get back to it at a later time.
As others have pointed out, you can't set the height of a table unless you set its display to block, but then you get a scrolling header. So what you're looking for is to set the height and display:block on the tbody alone:
<table style="border: 1px solid red">
<thead>
<tr>
<td>Header stays put, no scrolling</td>
</tr>
</thead>
<tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
<tr>
<td>cell 1/1</td>
<td>cell 1/2</td>
</tr>
<tr>
<td>cell 2/1</td>
<td>cell 2/2</td>
</tr>
<tr>
<td>cell 3/1</td>
<td>cell 3/2</td>
</tr>
</tbody>
</table>
Here's the fiddle.
Set display: block; for the table
Set position: sticky; top: 0; for the header row
<table style="display: block; height: 100px; overflow: auto;">
<thead>
<tr>
<td style="position: sticky; top: 0;">Header stays put</td>
<td style="position: sticky; top: 0;">Layout aligned</td>
</tr>
</thead>
<tbody>
<tr>
<td>foo1</td>
<td>Header stays put</td>
</tr>
<tr>
<td>foo2</td>
<td>Header stays put</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/0zxk18fp/
Tested on Chrome, Firefox, Safari, Edge
Add display:block; to the table's css. (in other words.. tell the table to act like a block element rather than a table.)
fiddle here
You can do this by using the following css.
.scroll-thead{
width: 100%;
display: inline-table;
}
.scroll-tbody-y
{
display: block;
overflow-y: scroll;
}
.table-body{
height: /*fix height here*/;
}
Following is the HTML.
<table>
<thead class="scroll-thead">
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody class="scroll-tbody-y table-body">
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
</tbody>
</table>
JSFiddle
I had a coworker ask how to do this today, and this is what I came up with. I don't love it but it is a way to do it without js and have headers respected. The main drawback however is you lose some semantics due to not having a true table header anymore.
Basically I wrap a table within a table, and use a div as the scroll container by giving it a max-height. Since I wrap the table in a parent table "colspanning" the fake header rows it appears as if the table respects them, but in reality the child table just has the same number of rows.
One small issue due to the scroll bar taking up space the child table column widths wont match up exactly.
Live Demo
Markup
<table class="table-container">
<tbody>
<tr>
<td>header col 1</td>
<td>header col 2</td>
</tr>
<tr>
<td colspan="2">
<div class="scroll-container">
<table>
<tr>
<td>entry1</td>
<td>entry1</td>
</tr>
........ all your entries
</table>
</div>
</td>
</tr>
</tbody>
</table>
CSS
.table-container {
border:1px solid #ccc;
border-radius: 3px;
width:50%;
}
.table-container table {
width: 100%;
}
.scroll-container{
max-height: 150px;
overflow-y: scroll;
}
Seems very similar to this question. From there it seems that this should do the trick:
table {
display: block; /* important */
height: 600px;
overflow-y: scroll;
}
A simple workaround that is available in most of the cases it to wrap the table in a div and then give a max-height to that div:
.scrollable-wrapper {
max-height: 400px;
overflow: auto;
}
/* Add also the following code if sticky header is wanted */
.scrollable-wrapper table thead th {
background: #afa;
position: sticky;
top: 0;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
<div class="scrollable-wrapper">
<table>
<thead>
<tr>
<th>Id</th>
<th>Text</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
Codepen: https://codepen.io/Conejoo/pen/NWpjmYw
In Tables, For minimum table cells height or rows height use css height: in place of min-height:
AND
For Limiting max-height of all cells or rows in table with Javascript:
This script is good for horizontal overflow tables.
This script increase the table width 300px each time (maximum 4000px) until rows shrinks to max-height(160px) , and you can also edit numbers as your need.
var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
while (row.offsetHeight > 160 && j < 4000) {
j += 300;
table.style.width = j + 'px';
}
}
Source: HTML Table Solution Max Height Limit For Rows Or Cells By Increasing Table Width, Javascript
Use divs with max height and min height around the content that needs to scroll.
<tr>
<td>
<div>content</div>
</td>
</tr>
td div{
max-height:20px;
}
https://jsfiddle.net/ethanabrace/4w0ksczr/
Just try this.
<div style="max-height: 400px; overflow: scroll">
<!--This is your table-->
<table style="border: 1px solid red">
<thead>
<tr>
<td>Header stays put, no scrolling</td>
</tr>
</thead>
<tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
<tr>
<td>cell 1/1</td>
<td>cell 1/2</td>
</tr>
<tr>
<td>cell 2/1</td>
<td>cell 2/2</td>
</tr>
<tr>
<td>cell 3/1</td>
<td>cell 3/2</td>
</tr>
</tbody>
</table>
</div>
<table style="border: 1px solid red">
<thead>
<tr>
<td>Header stays put, no scrolling</td>
</tr>
</thead>
<tbody id="tbodyMain" style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
<tr>
<td>cell 1/1</td>
<td>cell 1/2</td>
</tr>
<tr>
<td>cell 2/1</td>
<td>cell 2/2</td>
</tr>
<tr>
<td>cell 3/1</td>
<td>cell 3/2</td>
</tr>
</tbody>
</table>
Javascript Section
<script>
$(document).ready(function(){
var maxHeight = Math.max.apply(null, $("body").map(function () { return $(this).height(); }).get());
// alert(maxHeight);
var borderheight =3 ;
// Added some pixed into maxheight
// If you set border then need to add this "borderheight" to maxheight varialbe
$("#tbodyMain").css("min-height", parseInt(maxHeight + borderheight) + "px");
});
</script>
please, refer How to set maximum possible height to your Table Body Fiddle Here