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>
Related
I have recreated a CSS compatibility issue I have come across between Chrome and Firefox.
An "inner" DIV with 100% height inside a Table cell which is inside a "container" DIV of fixed height. I want the inner DIV to fill the cell and dynamically add text to it such that a scrollbar appears when it begins to overflow.
In the JSFiddle you can see the code in both Chrome and Firefox. In Chrome it behaves as expected but in Firefox the scrollbar doesn't display and the inner DIV just keeps expending beyond the height of the container DIV.
JSFiddle code to try in both Chrome and Firefox
HTML as follows:
<style>
#container {
height:80px;
width:100%;
border:1px solid;
overflow:hidden;
resize:vertical;
}
#inner {
height:100%;
width:300px;
border:2px solid red;
overflow-y:auto;
}
table{
height:100%;
}
</style>
<div id="container">
<table>
<tr>
<td>
<div id="inner">
Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
</td>
<td>
<img src="https://doc-snapshots.qt.io/qt-mobility/images/used-in-examples/video/qmlvideo/images/close.png" />
</td>
</tr>
</table>
</div>
EDIT, further requirement: I forgot to mention that I have this setup inside a resizable DIV i.e. the Container DIV is able to resize it's height so that the table and Inner DIV resize accordingly.
Thats a common mistake. Whenever an element is set to height: 100% or any other percentage, it relates to the height of its parent. So when using this, its important to define a height for the parent of your element:
To demonstrate the problem: Adding a class to the parent <td class="fix"> and add some css fixes the problem:
.fix {
height: 80px;
display: block;
}
WORKING JSFIDDLE DEMO
Keep in mind that setting the display attribute of a table cell from table-cell to block is something you should avoid, as you are changing the elements roots. Consider a solution without using a <table> markup if you have got the possibilities.
#inner {
border: 2px solid red;
height: 75px;
overflow: auto;
width: 300px;
}
You can use this CSS. I think it may work fine.
I'm trying to align an image and an heading vertically. I'd like to do this in a table because is should be some kind of a menu. So there are more of this 'segments'. The img and the heading have to be in the same td-element for some further functionality of my menu...
I've tried vertical-align: middle, display: inline-block & table-cell and many things more. But nothing seems to work for me. The h2-element seems to ignore all of this thinks and stick to the top.
img{float: left; height:100px; width:auto}
td{width: 300px; verical-align:middle}
<table><tbody>
<tr>
<td>
<img src="http://placehold.it/70x70">
<h2>TEXT</h2>
</td>
<td>
<img src="http://placehold.it/70x70">
<h2>TEXT</h2>
</td>
</tr>
</tbody></table>
Here is a fiddle of my problem https://jsfiddle.net/0x48n7qL/
How do I archieve this? What am I missing out?
EDIT:
The actual size of the image and therefore the height of the row is relative to the size of the page so I can't use fixed height values.
Add to your h2 those properties :
line-height: 100px;
margin: 0px;
https://jsfiddle.net/0x48n7qL/1/
There you go:
img {height:100px; width:auto; vertical-align: middle;}
td {width: 300px;}
h2 {display:inline-block; vertical-align: middle;}
https://jsfiddle.net/nr3j6Lco/2/
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>
I want to create a table that is fully contained within its parent element, but having column widths that are resolved based on their content. If the required length of the table is longer than the content box of the parent element, then a horizontal scrollbar shall appear underneath the table. I tried fiddling with the table-layout and overflow properties, but without success.
HTML code:
<div>
<table>
<tr>
<td>fixed_length_text</td>
<td>variable_length_text</td>
<td>image</td>
<td>double_float_double_float</td>
</tr>
<tr>
<td>fixed_length_text</td>
<td>variable_length_text_variable_length_text</td>
<td>image</td>
<td>double_float_double_float</td>
</tr>
</table>
</div>
CSS code:
div {
padding: 10px;
background: grey;
width: 400px;
}
table {
border-collapse: separate;
border-spacing: 2px;
background: white;
}
tr {
background: green;
}
This is what I have tried on jsFiddle. Is there anyway to combine the best of both worlds?
Try overflow-x:auto;. This applies to just the horizontal axis of the element.
if i understand you right than:
http://jsfiddle.net/nfg34/1/
I have an html table of width 222px
Inside in I have a single row with width defined as 160px.
Inside this row, there is a single column having same width as that
of the row.
My question is, how to align this row to the center of the table.
I have tried align="center"and style="float:center;" but these work only
on the contained text.
But if you really, really must use a table, here's how to style it:
.resultset {
width:222px; border:1px solid;
border-collapse:separate; border-spacing:30px 2px;
}
.resultset td {
border:1px solid;
}
Where the 30px in the border-spacing is half the horizontal difference between the table width and the cell width.
See jsFiddle.
Agree with Quentin. There is no point having a 1x1 table.
Try with the following.
<div style="margin: 0px auto; position: relative; width: 222px;">
....your content
</div>
You might want to create a CSS class for the div. I personally don't like having inline styles.
you can try this like that
<table width="222px" align="center">
<td width="31px"></td>
<td width="160px">test</td>
<td width="31px"></td>
</table>
test here : http://www.webmasterorbit.com/wysiwyg-html-tester.html
You must use this
<td align = 'center'>Blah blah</td>
using this wont work
<tr align = 'center'></tr>