How do I prevent a table from extending past its containers height - html

I have a table and whenever there are too many rows it goes off the bottom of the page and exceeds its containers height.
<body>
<div class="myContainer">
<table class="scrolldown">
<!-- Table head content -->
<thead class="test1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<!-- Table body content -->
<tbody class="test2">
<tr>
<td>Content</td>
<td>Content</td>
</tr>...
</tbody>
</table>
</div>
<body>
CSS
.myContainer {
outline-style: solid;
outline-color: #c7d2fe;
height: 100px
}
tbody td,
thead th {
width: 200px;
border-right: 2px solid black;
}
td {
text-align: center;
}
How can I make it so that the table becomes scrollable once it would extend past its containers height?
Fiddle

You can do this by adding overflow: auto; to the wrapper div .myContainer.
This will add a scrollbar to the container when the table is taller.
Fiddle

Related

visibility: collapse within a scrollable container produces unwanted scrollbar in Firefox/Edge

It seems like wrapper's div height is incorrectly calculated when thead's visibility is set to collapsed in Firefox/Edge. In Chrome there is no scrollbars. Any idea how to fix it?
.table-wrapper {
overflow: auto;
background-color: green;
border: 2px solid black;
}
thead {
visibility: collapse
}
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Head</th>
<th>Head</th>
<th>Head</th>
</tr>
</thead>
<tbody>
<tr><td>Content</td></tr>
<tr><td>Content</td></tr>
<tr><td>Content</td></tr>
</tbody>
</table>
</div>
I think it's likely because the scrollbar's existence is determined before the thead is removed from the flow in those browsers. When I scroll down, the amount of space after the table is about that of the hidden thead.
Best you could do is give your table-wrapper a fixed height larger than the table with the header (hard to determine ahead of time, and likely needs JavaScript).
Or, give the table a max-height of 100% and set its overflow to hidden:
.table-wrapper {
overflow: auto;
background-color: green;
border: 2px solid black;
}
table {
max-height: 100%;
overflow: hidden;
}
thead {
visibility: collapse;
}
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Head</th>
<th>Head</th>
<th>Head</th>
</tr>
</thead>
<tbody>
<tr><td>Content</td></tr>
<tr><td>Content</td></tr>
<tr><td>Content</td></tr>
</tbody>
</table>
</div>
But that kind of defeats the purpose of having overflow: auto on the table-wrapper… You'll need to pick your poison. Or wait until someone smarter than me answers :).

CSS table column min width to equal text size

I have a simple HTML table as below.
This is a responsive table and shrinks down when the browser is shrunk.
I want to set the minimum width of the column to be as wide as the header text.
What is the best way to do this in CSS?
<table>
<thead class="ui-datatable-thead">
<tr class="ui-state-default">
<th class="ui-state-default">COL HEADER</th>
</tr>
</thead>
<tbody class="ui-datatable-data ui-widget-content">
<tr class="ui-widget-content ui-datatable-odd">
<td>DATA</td>
</tr>
</tbody>
</table>
I have looked at some other answers but haven't found a solution yet.
table {
display: table;
width: 100%;
table-layout: fixed;
margin-bottom: 20px;
}
th,td {
display: table-cell;
border: 1px dotted red;
padding: 4px 6px;
width: 2%;
margin-bottom: 0;
}
<table>
<thead class="ui-datatable-thead">
<tr class="ui-state-default">
<th class="ui-state-default">COL HEADER 1</th>
<th class="ui-state-default">COL HEADER 2</th>
<th class="ui-state-default">COL HEADER 3</th>
</tr>
</thead>
<tbody class="ui-datatable-data ui-widget-content">
<tr class="ui-widget-content ui-datatable-odd">
<td>DATA 1</td>
<td>DATA 2</td>
<td>DATA 3</td>
</tr>
</tbody>
</table>
All you need to set the cell width th & td table-layout to 'fixed'.Just like i mentioned in css code. If total size of table is 500px and there are 5 columns then each column will have 100px.
table{
border: 1px solid black;
table-layout: fixed;
width: 500px;
}
th, td {
border: 1px solid black;
width: 100px;
}
You need to fix the size of the heading's TD. so body's TD will automatically take width as applied in heading's TD.

How to make a div to fit all available width even hidden with scroll?

I have a page with two panels. Second panel contains some large table so even with wrapped content it can't be displayed on full width window. Than I've added a horizontal scroll to fix this problem but it seems like div doesn't want to fit large table size.
Fiddle link
After some research I've found how to force second panel to fit the table size with this css change:
.pane {
display: table;
}
updated fiddle link
But there is another issue. The width of first and second panels are different. How to force the first panel to take all avaliable width even if it hidden with horizontal scroll?
Is there any pure html/css solution for this?
As advised, use display:table;, it will allow container to shrink/expand according to content and beyond window's size.
But since you need also an overflow, you may add an extra wrapper in between to allow those children to grow beyond the window's width and match to the widest one, i gave it .buffer as a classname to give it some meaning:
example:
.list {
overflow-x: auto;
}
.buffer {
display: table;
}
.pane {
border: 1px solid red;
margin: 15px 0;
}
.pane .head {
width: 100%;
background: #959595;
}
.pane .body {
width: 100%;
}
.pane .body table {
border: 1px solid green;
}
<div class="list">
<div class="buffer">
<!-- this a buffer container to allow to beyond window's width if displayed as table element *-->
<div class="pane">
<div class="head">
Pane 1 header
</div>
<div class="body">
Some body
</div>
</div>
<div class="pane">
<div class="head">
Pane 2 header
</div>
<div class="body">
<table width="100%">
<tbody>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>some_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super big content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
https://jsfiddle.net/8cepsL09/6/
Its NOT a pure html/css solution but it works
I've used jquery to get the width of the second and apply it to the first
$('#pane1').width($('#pane2').width())
.list {
overflow-x: auto;
}
.pane {
border: 1px solid red;
width: 100%;
margin: 15px 0;
display: table;
}
.pane .head {
width: 100%;
background: #959595;
}
.pane .body {
width: 100%;
}
.pane .body table {
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<div class="pane" id="pane1">
<div class="head">
Pane 1 header
</div>
<div class="body">
Some body
</div>
</div>
<div class="pane" id="pane2">
<div class="head">
Pane 2 header
</div>
<div class="body">
<table width="100%">
<tbody>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>some_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super big content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
You'll need to add in jquery to your site and add id's to your panes (you can use other ways of accessing your panes, but I find that ids are easist)
you can add this to your css
table {
border-collapse:collapse; table-layout:fixed;
}
table td {
border:solid 1px #fab; width:25%; word-wrap:break-word;
}
and adapt the width to the amount of columns.
EDIT: fiddle.js here
It would also be possible to play around with something like e.g.
padding-right: 3000px;
margin-right: -3000px;
which would extend the space used by the element.
See https://www.sitepoint.com/css-extend-full-width-bars/ for more details...

Css apply margin to a table inside a div

I have a situation similar to the one represented in this fiddle,
where there is a table with
table {
width: 100%;
margin-right: 30px;
}.
inside a div.
The problem is that when I apply the margin to the table, it goes out of its parent div. How can I avoid that?
Add a padding-right on the div instead :
div {
padding-right: 30px;
}
table {
width: 100%;
}
demo
The width applies to the actual content of the element, so you have a table with 100% wide content, and on left of that you add some margins pushing the width over 100%, thus the right side of the table extends beyond the parent's right edge. Probably you should go with padding on the parent instead of margin on the table, or an additional wrapper with just the margin.
table {
width: 100%;
border:1px solid green;
border-collapse: collapse;
}
.inner{
margin-left:100px;
}
<div>
<div class="inner">
<table border="1">
<thead>
<tr>
<th>HEADER 1</th>
<th>HEADER 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</div>

Why is my HTML table not respecting my CSS column width?

I have a HTML table and I want the first few columns to be quite long. I am doing this in CSS:
td.longColumn
{
width: 300px;
}
and here is a simplified version of my table
<table>
<tr>
<td class='longColumn'></td>
<td class='longColumn'></td>
<td class='longColumn'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
[ . . and a bunch more columns . . .]
</tr>
</table>
For some reason the table seems to make this column < 300px when there are a lot of columns. I basically want it to keep that width no matter what (and just increase the horizontal scroll bar).
The container that the table is inside, doesn't have any type of max width so I can't figure out why it's squeezing this column down as opposed to respecting this width.
Is there anyway around this so no matter what, this column will stay a certain width?
Here is the CSS of the outer container div:
#main
{
margin: 22px 0 0 0;
padding: 30px 30px 15px 30px;
border: solid 1px #AAAAAA;
background-color: #fff;
margin-bottom: 30px;
margin-left: 10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
float: left;
/*width: 1020px;*/
min-width:1020px;
display: block;
overflow: visible;
z-index: 0;
}
You may get more luck with setting widths for your table cells if you apply the rule table-layout: fixed to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.
Giving it both max-width and min-width attributes should work.
I agree with Hristo but there are some cases where table need to be used and solution to your table problem is adding below class to the table and then changing any td width as per your need.
.tables{ border-collapse:collapse; table-layout:fixed;}
I hope this helps for someone who is looking for table solution!
I had the same problem with a bunch of columns where I wanted spacers columns.
I used to do:
<td style='width: 10px;'> </td>
But when the table was wider than window, the spacers were not really 10px, but maybe 5px.
And using only DIVs without a TABLE was not an option in my case.
So I tried:
<td><div style='width: 10px;'></div></td>
And it worked very well ! :)
The best way to set your column widths (td's) is to use a table header (th's). Table headers will set the width on your td's automatically. You just have to make sure that your columns inside your thead are the same number of columns in your tbody.
Check it out here:
http://jsfiddle.net/tKAj8/
HTML
<table>
<thead>
<tr>
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="long-column">Long Column</th> <!-- th sets the width -->
</tr>
</thead>
<tbody>
<tr>
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="gray">Long Column</td> <!-- td inherits th width -->
</tr>
</tbody>
</table>
CSS
table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; }
.short-column { background: yellow; width: 15%; }
.long-column { background: lime; width: 70%; }
.lite-gray { background: #f2f2f2; }
.gray { background: #cccccc; }
I had issues with not being able to size columns in a table-layout: fixed table that was using a colspan. For the benefit of anyone experiencing a variant of that issue where the suggestion above doesn't work, colgroup worked for me (variation on OP's code):
div {
margin: 22px 0 0 0;
padding: 30px 30px 15px 30px;
border: solid 1px #AAAAAA;
background-color: #fff;
margin-bottom: 30px;
margin-left: 10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
float: left;
/*width: 1020px;*/
min-width:1020px;
display: block;
overflow: visible;
z-index: 0;
}
td.longColumn {
width: 300px;
}
table {
border: 1px solid;
text-align: center;
width: 100%;
}
td, tr {
border: 1px solid;
}
<div>
<table>
<colgroup>
<col class='longColumn' />
<col class='longColumn' />
<col class='longColumn' />
<col/>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td colspan="7">Stuff</td>
</tr>
<tr>
<td>Long Column</td>
<td>Long Column</td>
<td>Long Column</td>
<td>Short</td>
<td>Short</td>
<td>Short</td>
<td>Short</td>
</tr>
</tbody>
</table>
</div>
For those that are having Table Cell/Column width problems and table-layout: fixed did not help.
When applying fixed widths to table cells (<td> or <th>), do not assign a width to all of the cells. There should be at least one cell with an (auto) width. This cell will act as a filler for the remaining space of the table.
e.g.
<table>
<thead>
<tr>
<th style="width: 150">Assigned 150 width to Table Header Cell</th>
<th style="width: 100">Assigned 100 width to Table Header Cell</th>
<th>No width assigned</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 150">Assigned 150 width to Table Body Cell</td>
<td style="width: 100">Assigned 100 width to Table Body Cell</td>
<td>No width assigned</td>
</tr>
</tbody>
</table>
P.S. you can use style classes here, you don't need to use an in-line style.
Use table-layout property and the "fixed" value on your table.
table {
table-layout: fixed;
width: 300px; /* your desired width */
}
After setting up the entire width of the table,
you can now setup the width in % of the td's.
td:nth-child(1), td:nth-child(2) {
width: 15%;
}
You can learn more about in on this link: http://www.w3schools.com/cssref/pr_tab_table-layout.asp
Can't modify <td> width; that is, column width isn't settable. You can add the styling white-space:nowrap; which might help. Or you can add s to add space to columns.
Maybe you could set col width the HTML way: <td width="70%">January>/td>
Unfortunately, in HTML 4.01 and later, that way isn't valid.
How about something like this...
http://jsfiddle.net/qabwb/1/
HTML
<div id="wrapper">
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
</div>
CSS
#wrapper {
min-width: 450px;
height: auto;
border: 1px solid lime;
}
.row {
padding: 4px;
}
.column {
border: 1px solid orange;
border-left: none;
padding: 4px;
display: table-cell;
}
.first {
border-left: 1px solid orange;
}
.longColumn {
min-width: 150px;
}