I have a div inside a td. The td has a height. How I can stretch the div vertically - without setting its height explicitely.
<td style='height:200px'>
<div>hello<div>
<td>
I tried setting the vertical-alignment but there is no "stretch" value.
Sample
http://jsfiddle.net/hnBNk/
HTML
<table>
<tr>
<td style='height:200px; border: 1px solid red;'>
<div style="border: 1px solid blue;">hello</div>
</td>
</tr>
</table>
CSS
div { /* This is a sample! Of course a class 'my_div' would make more sense */
height: 100%;
}
Try this:
td div {
height:100%
}
how about this?
<td style='height:200px'>
<div style="height:100%">hello<div>
<td>
OK, it is explicit definition, but it stretches according to parent element.
Try this:
<div style="min-height:100%">
It will automaticly stretch if the text needs more space (vertically)
Related
I am trying to show some details of a receive in a table.
I want that table to have a min height to show the products. So if there is only one product, the table would have at least some white space at the end. In the other hand if there are 5 or more products, it won't have that empty space.
I have tried this CSS:
table,td,tr{
min-height:300px;
}
But it is not working.
height for td works like min-height:
td {
height: 100px;
}
instead of
td {
min-height: 100px;
}
Table cells will grow when the content does not fit.
https://jsfiddle.net/qz70zps4/
It's not a nice solution, but try it like this:
<table>
<tr>
<td>
<div>Lorem</div>
</td>
</tr>
<tr>
<td>
<div>Ipsum</div>
</td>
</tr>
</table>
and set the divs to the min-height:
div {
min-height: 300px;
}
The solution without div is used a pseudo element like ::after into first td in row with min-height. Save your HTML clean.
table tr td:first-child::after {
content: "";
display: inline-block;
vertical-align: top;
min-height: 60px;
}
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables,
inline tables, table cells, table rows, and row groups is undefined.
So try wrapping the content in a div, and give the div a min-height
jsFiddle here
<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
<tbody>
<tr>
<td>
<div style="min-height: 100px; background-color: #ccc">
Hello World !
</div>
</td>
<td>
<div style="min-height: 100px; background-color: #f00">
Good Morning !
</div>
</td>
</tr>
</tbody>
</table>
if you set style="height:100px;" on a td if the td has content that grows the cell more than that, it will do so no need for min height on a td.
Tables and table cells don't use the min-height property, setting their height will be the min-height as tables will expand if the content stretches them.
Setting height on table cells only works correctly, if your td is not using box-sizing: border-box. With border-box it will stay the height you set and content will overflow.
Use content-boxor something else.
I ran into this problem because I used a css-resetter.
Simply use the css entry of min-height to one of the cells of your table row. Works on old browsers too.
.rowNumberColumn {
background-color: #e6e6e6;
min-height: 22;
}
<table width="100%" cellspacing="0" class="htmlgrid-table">
<tr id="tr_0">
<td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
<td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>
I am looking for a way to specify a table's width by specifying widths of its TDs.
In the following scenario (try it live on jsfiddle) you can see that I have specified width of each TD as 100px and I expected to get a 300px table (and a horizontal scrollbar for div) but in practice browsers give them a width of 63px (that's table's width divided by 3)
Is there any way to make TDs determine the width of table and not other way round? So far I have tried different values of table-layout, display, overflow for TD and TABLE without any success.
The html:
<div>
200px
<table>
<tr>
<td>100px</td>
<td>100px</td>
<td>100px</td>
</tr>
</table>
</div>
and a minimal CSS:
div {
width: 200px;
height: 300px;
border: solid 1px red;
overflow-x: scroll;
}
td {
width:100px;
border: solid 1px #000;
}
table {
border-collapse: collapse;
}
A simple solution is make the td's content be 100px wide.
<div>
200px
<table>
<tr>
<td><div class="content">100px</div></td>
<td><div class="content">100px</div></td>
<td><div class="content">100px</div></td>
</tr>
</table>
</div>
.content {
width: 100px;
}
Simplest solution appears to be setting min-width instead of width for TDs.
If you're dynamically generating the table, you could just dynamically set the width of the table while you're at it. Just calculate the desired width, and add style="width:300px;" (or whatever) to the <table> tag.
Not that the other options people have posted here aren't also perfectly valid, of course.
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>
Here's an example on JSFiddle.
Excerpt of code:
<table style="height:100%">
<tr height="20"><td></td></tr>
<tr>
<td>This gray cell fits all available height of table</td>
</tr>
<tr height="20"><td></td></tr>
</table>
There is a table with three rows. Row in the middle fits all available height of table.
I took this solution from here.
Problem is that impossible to make overflow-y for middle cell. It seems that the middle cell has a min-height property equals height of it's content.
So does it possible to turn on scrolling (overflow-y:auto) somehow and if it doesn't how to implement this layout in divs?
UPD. Thanks. Seems like this is working example: http://jsfiddle.net/haGWe/6/
But it's still interesting how to implement this with divs.
Here it is.
Basically, add a div inside your td element, add a fixed height (I chose 20px) and overflow: auto.
Wrap the contents of middle row in a div and apply the css to the div.
<div class="widget">
<table cellpadding="0" cellspacing="0">
<tr class="widget-header">
<td>20 px above</td>
</tr>
<tr class="widget-content">
<td><div id="myDiv">This gray cell fits all available height of table. What happens when more text is added to this? Woot, scrolls bars.</div></td>
</tr>
<tr class="widget-footer">
<td>20 px below</td>
</tr>
</table>
</div>
.widget{
position:absolute;
min-width:200px;
width:200px;
outline:1px solid gray;
right:50%;
top:20px;
}
.widget > table{
height:100%;
width:100%;
}
.widget-header{
height:20px;
}
.widget-content{
vertical-align:top;
background:gray;
}
.widget-footer{
height:20px;
}
#myDiv
{
height:40px;
overflow-y:scroll;
}
http://jsfiddle.net/2YvG6/
I need to place a scrollable div in a table cell. The table should be 100% height. The div has a lot of content that doesn't fit in the screen so scrolling should appear. But I want only the div to be scrollable, not the whole page.
If I don't use table, everything is perfect:
<div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px; border-style: solid;">
<div>
Item 1<br/>
Item 2<br/>
...
Item 300<br/>
</div>
</div>
Div is scrollable, page has no scrollbar. But if it's wrapped in a table:
<table style="height: 100%">
<tr>
<td>
<div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px;
border-style: solid;">
<div>
Item 1<br/>
Item 2<br/>
...
Item 300<br/>
</div>
</div>
</td>
</tr>
</table>
page becomes scrollable, and the div ceases to be such. What can I do?
Shouldn't be height: 100%; and overflow: auto; on <td> ?
I think your main problem is that you cannot expect the div to go to 100% height, because the table that is holding it also has a % as its width.
The container of the div must have an absolute height.
This is my code:
<table height="2000px">
<tr>
<td>
<div style="height: 100%; width: 100px; padding: 5px; overflow: scroll; border: 1px solid #000;">
Item 1<br/>
Item 2<br/>
...<br/>
Item 300<br/>
</div>
</td>
</tr>
</table>
Which uses a scroll bar on the div and because of its height also makes the page scroll bar appear.
Unforunately unless you use some hacky CSS work around (Which might won't work in all browsers) you cannot tell a div to be 100% height without giving its container an absolute height as I have done above.
If I am wrong I'm sure someone will correct me, but I have tried to give divs 100% height to fit the browser window in the past without CSS or Javascript hacks and failed.
Tables actually use minimum height, so whenever your div gets bigger than what you want, the table column is actually just resizing to fit your div, and so your div percentage is rendered useless.
You need to use divs, not tables.
You should change table-layout css property to "fixed" value.
<table style="table-layout: fixed; width: 100%;">
<tr>
<td>
<div style="overflow: scroll;">
Scrollable div
</div>
</td>
</tr>
</table>