I have a table that is in a DIV with overflow: auto :
HTML:
<div id="table">
<table>
<tr>
<th>Heading</th>
</tr>
<tr>
<td>Data</td>
</tr>
</table>
</div>
In total there are 6 TH tags and 6 TD tags
CSS:
div#table
{
overflow: auto;
padding: 15px;
}
div#table table
{
border-collapse: collapse;
}
The overflow ensures that there is a horizontal scroll bar on the DIV so that the full table can be viewed.
I also specified padding on the DIV in the hope that the scroll bar and table are not positioned on the edges of the DIV - however this bit isn't working.
So basically what I want is for there to be padding around the DIV and the overflown content should not be touching the right edge of the DIV. I hope this makes sense!
You need something like this? http://jsbin.com/iseda3
if yes you can use the following code:
html
<div id="table">
<div>
<table>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</div>
</div>
css
div#table {
background:#09F;
width:150px;
}
div#table div {
overflow: auto;
margin: 15px;
}
div#table table {
border-collapse: collapse;
}
It sounds like you need to wrap your table in one further <div> element that has the required padding within it. Your table would then fit within that element but would still be subject to the parent container's overflow.
<div id="table">
<div style="padding: 1em;">
<table>
<tr>
<th>Heading</th>
</tr>
<tr>
<td>Data</td>
</tr>
</table>
</div>
</div>
You might want to consider making a container div that has the padding, and then put the div with id table inside of that larger div.
div#tableHolder
{
padding: 15px;
}
div#table
{
overflow: auto;
}
div#table table
{
border-collapse: collapse;
}
Related
I have this table
table td {
width: 200px;
text-align: center;
}
.red {
border:1px solid red;
}
<table>
<thead>
<tr>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="red">$ 11.122,00</td>
</tr>
<tr>
<td class="red">$ 11.1,00</td>
</tr>
<tr>
<td class="red">$ 11.122,00232</td>
</tr>
<tr>
<td class="red">$ 11.122,00</td>
</tr>
</tbody>
</table>
I need to have my numbers centered in the td itself, but I can't find a way to position the numbers one under another so the end result will look like this
So I need centered text in the td but the number is vertically aligned by the, and the . from the right
So at the end result will be in the centered td:
$ 11.122,00
$ 11.1,00
$ 11.122,00232
I don't need text-align:right on this, because onthat way they will be aligned just right, the numbers will be one under another, but the whole content in the td will be not centered - it will be just right aligned.
If I've understood correctly, you want the cell header centered, and the cells right aligned? If so, just add a style for the th like so:
table td {
width: 200px;
text-align: center;
}
table td span {
width: 50%;
border:1px solid red;
display:inline-block;
text-align:right;
}
.red {
border:1px solid red;
}
<table>
<thead>
<tr>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="red">
<span>
$ 11.122,00
</span>
</td>
</tr>
<tr>
<td class="red"><span>$ 11.1,00</span></td>
</tr>
<tr>
<td class="red"><span>$ 11.122,00232</span></td>
</tr>
<tr>
<td class="red"><span>$ 11.122,00</span></td>
</tr>
</tbody>
</table>
Quoting this, since I don't have the right reputation to comment...
Thank you. I thought the same thing you suggest. The problem is that the width is fixed - so what if some number is bigger than the whole width - 50% of the parent ?
Set your parent width to width:auto; and it will actually get the right width based on it's child width. So it wont be a problem if it comes a row with more characters than you want.
I am struggling with this problem for quite a while now and can't find a proper solution to my problem.
What I have:
<div style="width:150px; border:1px solid #000;overflow: auto;">
<div>SOME TEXT</div>
<table style="width:100%; border:1px solid #0F0;">
<tr>
<td>HEAD1</td>
<td>HEAD2</td>
<td>HEAD3</td>
</tr>
<tr>
<td colspan="3">
<div style="overflow: auto; border:1px solid #F00;">
<table>
<tr>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
</tr>
<tr>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
http://jsfiddle.net/37ExS/
Explanation:
The outer div represents my content wrapper with a fixed with, which contains some other divs and a table with data.
Inside of the data table is a row, which contains another table with detailed data in reference to the row above it.
What I want:
The table cell, which currently has a colspan of "3", containing the detail table should have it's overflowing content creating a scrollbar. Which is why I wrapped the content in another div, but it seems like the div's width is determined by it's content, rather than by it's parents (TD) width. setting a fixed width for the inner div works, but I want it dynamically, since I really don't know the width of the content wrapper.
I hope that was understandable.
UPDATE:
This is how it should behave:
http://jsfiddle.net/eRA33/
I could use that and be fine about it, but I really don't know the cross-browser support and it looks a bit hacky to me, would be nice, if someone has a nicer way of doing that.
The problem is that you can't use the overflow property on the table element. A nicer way of doing it (in my opinion), is to add tbody tags and set them as display: block. This lets them scroll. This also avoids using a bunch of wrapper divs.
Don't worry about using table-layout; it's well supported.
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Here's a small fiddle to demonstrate. I put your styles in the style section, as it was easier for me to work that way :)
http://jsfiddle.net/eRA33/2/
HTML
<div class="wrapper">
<div>SOME TEXT</div>
<table class="table-scroll table-data">
<tbody>
<tr>
<td>HEAD1</td>
<td>HEAD2</td>
<td>HEAD3</td>
<td>HEAD4</td>
</tr>
<tr>
<td colspan="4">
<table class="table-scroll table-detail">
<tbody>
<tr>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
</tr>
<tr>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
CSS
.wrapper {
width:180px;
border:1px solid #000;
}
.table-scroll {
width:100%;
table-layout: fixed;
}
.table-scroll tbody {
display:block;
overflow:scroll;
}
.table-data {
border:1px solid #0F0;
}
.table-detail {
border:1px solid #F00;
}
Why is this sample table, the body does not have the specified width?
<html>
<head>
<style type="text/css">
table{
border-collapse:collapse;
}
table,th, td{
border: 4px, solid;
}
#article{
background-color: #FDF8AB;
border: 3px solid #85A110;
width: 760px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body id="article">
<div>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Date</th>
<th>Notes</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>20-12-2013</td>
<td>AAAa</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>20-12-2013</td>
<td>AAAa</td>
</tr>
<tr>
<td>Eve </td>
<td>Jackson</td>
<td>20-12-2013</td>
<td>AAAa</td>
</tr>
<tr>
<td>John </td>
<td>Doe</td>
<td>20-12-2013</td>
<td>AAAa</td>
</tr>
<tr>
<td>Adam </td>
<td>Johnson</td>
<td>20-12-2013</td>
<td>AAAa</td>
</tr>
</table>
</div>
</body>
</html>
You are using
#article {
background-color: #FDF8AB; /* Other Styles */
}
So when you are not using any background color for your html element, the next parent level element is body and so you are confused, provide a background color to html element and you'll see the difference
Demo
My Suggestion:
You should not use fixed width for body tag, let it be width: 100%; which it is, by default, as it's a block level element, instead, wrap your table inside a container div, use fixed width and auto margins for this div which will give you the desired effect and also in a neat way
The Right Way
You should place everything within the body into a div or section container/wrapper.
You define a width on the wrapper.
You apply a style to the body of text-align center.
So that the div#container or section#content has a defined width and margin:0 auto;.
Also if you have a 3px border, your width with be width + border left + border right. So that's where the extra 6 pixels are coming from.
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
Sorry to beat a dead horse, but I need some advice on centering the contexts inside a div tag. I have a div tag with a table inside it (the div with the context class). I have an align attribute on it and it produces the results I want, but I would like to do this properly with css. If I set the div's 'text-align' to 'center', that propagates down into the table cells, which is not what I want. So... how do I center the div's contents without affecting the table cells? Here is a fiddle for this code.
<style type="text/css">
* { font-family: Arial; font-size: 12px; }
.container { padding-bottom: 10px; }
.content { background-color: #EEEEEE; }
</style>
<div class="container">
<div>Demo</div>
<div class="content" align="center">
<table>
<tbody>
<tr>
<td>Item 1</td>
<td style="padding-left: 10px;">remove</td>
</tr>
<tr>
<td>Item 2</td>
<td style="padding-left: 10px;">remove</td>
</tr>
<tr>
<td>Item 3</td>
<td style="padding-left: 10px;">remove</td>
</tr>
<tr>
<td>Item 4</td>
<td style="padding-left: 10px;">remove</td>
</tr>
<tr>
<td>Item 5</td>
<td style="padding-left: 10px;">remove</td>
</tr>
</tbody>
</table>
</div>
</div>
Instead of the align attribute, do this:
table { margin: 0 auto; }
Live demo: http://jsfiddle.net/V9JRP/1/
Of course, you may want to use an ID or class selector to select the table...
The rule is this: If the element is a block-level element, and you want to center it, set margin:0 auto; on it. This may require the width of that element to be set explicitly.
div.content table {
margin: 0 auto;
}
table {width:100px;margin:0 auto;}
That should set you right, just specify the width you are after.