I have the following peculiar problem. Lets start with a code snippet:
...
<td>
<div class="scrollable">...</div>
...other cell content...
</td>
...
Now I want the table render as if the div.scrollable wouldn't take any horizontal space (i.e. the div.scrollable doesn't push on the right side of the table), but show the horizontal scrollbar (on the div.scrollable, not on the whole cell) if the div.scrollable is wider then the containing cell. Is that possible to do via CSS?
Thanks!
Using your basic example you would likely need a set width on the td and to use overflow and overflow-y. overflow-y is CSS3 only but you didn't specify IE8 and below.
EDIT sorry you also need display:block; on the td
td { display: block; width: 50px; }
.scrollable { overflow: scroll; overflow-y:hidden; }
UPDATE:
See the jsfiddle example, notice the 100% width on the table and the fixed layout.. thats to stop the example from just adding a horizontal scroll to the viewport and carrying on.
http://jsfiddle.net/MMeTe/4/
Credit goes to Pricey as his jsfiddle example answers the question, but to have the answer with the code here, I attach it bellow:
...
<style type="text/css>
.mytable {
table-layout: fixed;
}
.scrollable{
overlow-y: auto;
}
</style>
...
<table class="mytable">
<tr>
<td>
<div class="scrollable">...</div>
other content...
</td>
</tr>
</table>
Related
Given a <table> with one or many <td>'s with text that is wider than the parent <div>, is there a way to make the table scroll without making the parent <div> use overflow:auto, and still have the table retain 100% width?
I'm hoping for a CSS solution I can apply to ONLY the <table> element (or its children).
Example: See JSFiddle Demo.
CSS:
<style>
#wrapper {
width: 250px;
/* looking for solution that doesn't use overflow auto here */
}
table {
border-collapse: collapse;
}
td {
border:1px solid #ccc;
padding: 3px;
}
</style>
HTML:
<div id="wrapper">
<p>Table should scroll, but not this text.</p>
<table>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td>..</td>
<td>..</td>
<td>....................................................................................</td>
</tr>
<tr>
<td>..</td>
<td>..</td>
<td>..</td>
</tr>
</tbody>
</table>
</div>
Not modifying the parent div is important in my project because <table>'s are in a <div> with a bunch of other content that I do not want to scroll with it. While I could add a wrapper <div> to all tables in my project, I would also have to rewrite a JavaScript plugin (has to do with paging), which I am trying to avoid.
You can use overflow: scroll on the table itself if you make it display as block:
table {
display: block;
overflow: scroll;
}
Edit:
As the comments below suggest, use td { width: 1%; } as a somewhat-messy way to get the table to still be 100% width if the content is narrower than the wrapper.
Fiddle: http://jsfiddle.net/94g53edb/12/
I am just a newbie in css and html, but if I can give my opinion, so there will be two ways in achieving that:
You can set the <p> to the fixed position,
or
You can create another wrapper for the table.
:)
[I'm adding a second answer because the comments on my first answer are going in a different direction than my new answer, and I don't want to derail that train]
Set the table to display: block and overflow: scroll, and give each of the cells a min-width (in pixels) to make up 100% of the container's width.
Here's what it looks like with table content less than the container width: http://jsfiddle.net/94g53edb/8/
Because the cells have only a min-width and not a fixed width, they can expand as needed, pushing the table to greater than the width of the container, and the table will scroll: http://jsfiddle.net/94g53edb/9/
Is there a way to add a scroll bar to a 'td' tag?
I have a dynamic content inside a 'td' tag. I want the 'td' to be of fixed size and if the content becomes larger than the 'td' size, I want a scroll bar to appear only on that particular cell. Is there a way to achieve this?
Yes you can do that.
The easiest way is to put inside your cell a div filling it and set its overflow style property.
CSS :
div.scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
HTML :
<td><div class=scrollable>
Some content with a scrollbar if it's too big for the cell
</div></td>
If you want the scrollbar to be always visible, even when the content isn't cropped, replace auto with scroll in the CSS.
Demonstration
<table width ="400" >
<tr>
<td >
<div style="width:100%; max-height:300px; overflow:auto">Your content here
</div>
</td>
</tr>
</table>
http://jsfiddle.net/7T2S4/1/
Hope this helps
You should need to provide either "height" Or "width" of div element, So that it would be scroll accordingly.
for example you want to apply Scroll Vertically(Y-axis):-
<td><div class="scrollable">
Some content with a scrollbar if it's not fit in your customized container
</div></td>
div.scrollable
{
width:100%;
height: 100px;
margin: 0;
padding: 0;
overflow-y: scroll
}
Please see the example.
I provided height:150px; overflow:auto; to all <td> tags. On less content the height is working fine. For more content vertical scroll bar need to come. But it is not working here for the table cell.
If I use <div> inside the <td> tag with the style property height:inherit; overflow:auto; means scroll is working.
Any solution or reason is there for the overflowed <td> tag?
Please suggest.
Hi now if you change your td display properties than it's work
as like this
td{
display: inline-block;
}
Can be solved by specifying display: block; and float: left; to your TD's style
td { height:150px; overflow:auto; display: block; float: left; }
Demo: http://jsbin.com/ofufuf/1/edit
Table tag does not support overflow property directly.
You have to do this the way you were trying i.e you have to insert a div inside a td and then add overflow in that div.
<table>
<tr>
<td>
<div style="height:100px;overflow:auto;">abc</div>
</td>
</tr>
</table>
I have an indeterminate number of table-cell elements inside a table container.
<div style="display:table;">
<div style="display:table-cell;"></div>
<div style="display:table-cell;"></div>
</div>
Is there a pure CSS way to get the table-cells to be equal width even if they have differently sized content within them?
Having a max-width would entail knowing how many cells you have I think?
Here is a working fiddle with indeterminate number of cells: http://jsfiddle.net/r9yrM/1/
You can fix a width to each parent div (the table), otherwise it'll be 100% as usual.
The trick is to use table-layout: fixed; and some width on each cell to trigger it, here 2%. That will trigger the other table algorightm, the one where browsers try very hard to respect the dimensions indicated.
Please test with Chrome (and IE8- if needed). It's OK with a recent Safari but I can't remember the compatibility of this trick with them.
CSS (relevant instructions):
div {
display: table;
width: 250px;
table-layout: fixed;
}
div > div {
display: table-cell;
width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}
EDIT (2013): Beware of Safari 6 on OS X, it has table-layout: fixed; wrong (or maybe just different, very different from other browsers. I didn't proof-read CSS2.1 REC table layout ;) ). Be prepared to different results.
HTML
<div class="table">
<div class="table_cell">Cell-1</div>
<div class="table_cell">Cell-2 Cell-2 Cell-2 Cell-2Cell-2 Cell-2</div>
<div class="table_cell">Cell-3Cell-3 Cell-3Cell-3 Cell-3Cell-3</div>
<div class="table_cell">Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4</div>
</div>
CSS
.table{
display:table;
width:100%;
table-layout:fixed;
}
.table_cell{
display:table-cell;
width:100px;
border:solid black 1px;
}
DEMO.
Just using max-width: 0 in the display: table-cell element worked for me:
.table {
display: table;
width: 100%;
}
.table-cell {
display: table-cell;
max-width: 0px;
border: 1px solid gray;
}
<div class="table">
<div class="table-cell">short</div>
<div class="table-cell">loooooong</div>
<div class="table-cell">Veeeeeeery loooooong</div>
</div>
Replace
<div style="display:table;">
<div style="display:table-cell;"></div>
<div style="display:table-cell;"></div>
</div>
with
<table>
<tr><td>content cell1</td></tr>
<tr><td>content cell1</td></tr>
</table>
Look at all the issues surrounding trying to make divs perform like tables. They had to add table-xxx to mimic table layouts
Tables are supported and work very well in all browsers. Why ditch them? the fact that they had to mimic them is proof they did their job and well.
In my opinion use the best tool for the job and if you want tabulated data or something that resembles tabulated data tables just work.
Very Late reply I know but worth voicing.
this will work for everyone
<table border="your val" cellspacing="your val" cellpadding="your val" role="grid" style="width=100%; table-layout=fixed">
<!-- set the table td element roll attr to gridcell -->
<tr>
<td roll="gridcell"></td>
</tr>
</table>
This will also work for table data created by iteration
This can be done by setting table-cell style to width: auto, and content empty. The columns are now equal-wide, but holding no content.
To insert content to the cell, add an div with css:
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
You also need to add position: relative to the cells.
Now you can put the actual content into the div talked above.
https://jsfiddle.net/vensdvvb/
Here you go:
http://jsfiddle.net/damsarabi/gwAdA/
You cannot use width: 100px, because the display is table-cell. You can however use Max-width: 100px. then your box will never get bigger than 100px. but you need to add overflow:hidden to make sure the contect don't bleed to other cells. you can also add white-space: nowrap if you wish to keep the height from increasing.
I'm trying to accomplish something that I thought would be simple, but it seems that when it comes to CSS, you never know!
I have an image float to the left. Beside it, I have a title and under that title, but still besides the image, I want to display a table taking all the remaining width. In IE and Chrome, the table ends up under my image while in Firefox, it takes more that 100% (an horizontal scroll bar is displayed). Firefox gives a result closer to what I want, but I don't want the scrollbar.
Here some code that I tried to make work using w3school "try it" editor (http://www.w3schools.com/css/tryit.asp?filename=trycss_float)
<html>
<head>
<style type="text/css">
h1{
font-size:1em;
}
img
{
float:left;
}
.field{
width:100%
}
</style>
</head>
<body>
<img src="logocss.gif" width="95" height="84" />
<div class="content">
<h1>this is the title</h1>
<form>
<table width="100%">
<tr>
<td><input type="text" class="field"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
I know the structure is too complex for that simple form, but forms are automatically generated by a PHP script so I'd like to keep it that way.
Because you have a floated image taking horizontal space from the .content div is why you get the extended table. The .content div is not aware of the floated image width. You can offset this by placing a margin at least the width of the image on the .content div.
.content
{
margin-left: 95px;
}
fiddle
Try setting your <table> to display: block in the CSS and dropping the width="100%" attribute:
table {
display: block;
}
http://jsfiddle.net/ambiguous/dyxw7/
The above example includes a red border on the table so that you can see where it is, I also changed the image to a kitten to make sure it would show up.
The .content div is 100% of the page wide including the bit under the floated image so the input set at 100% is also going to be that wide, to make the .content div take up only the space that's left after the floating image you can add overflow: hidden to it, but then the input itself can use varying box models, so I would suggest using a width of 99% on it. If the content is not actually an input then maybe 100% will work for most elements ;)
e.g. x-browser-code
h1 {font-size:1em;}
table {border-collapse: collapse; width: 100%;}
table td {padding: 0;}
.content {overflow: hidden;}
form {padding: 0; margin: 0;}
img {float:left;}
.field {
width:99%;
margin: 0 auto;
}
I think you have to float your table along with your image and remove the width:100% on your table.
<div id="content">
<div id="side_bar" style="float:left;">image</div>
<div id="main_content" style="float:left;">table</div>
<div style="clear:left;"></div>
</div>
or the old way
<table>
<tr>
<td>image</td>
<td>table</td>
</tr>
</table>