Q:
Why does my table's cell height doesn't change
I have this table :
And all td's has font-size 1px...
I want that cells' height increases according to the increase of the font size.
And I found this code :
Untitled Document
And it works great , but I want it with my table... I changed the
and | 's height to 1px but the size isn't changed.
Why ?
In my mind , the value should be 1.5 (each cell has 1px height)
but it's not. What did I do wrong ?
Thanks.
A:
Your height for td must be equal to height of the content inside the cell.
Therefore in CSS set width for td and give class to each row cell as one of these classes:
.one-size{height:1px;width:1px;}
.two-size{height:1px;width:2px;}
.three-size{height:1px;width:3px;}
Than use this CSS instead:
td{height:1px;width:1px;}
And your problem should be solved.
Here is demo: http://jsfiddle.net/3vWnC/
Also you can get similar effect with CSS3 pseudo elements as described here:
http://css-tricks.com/almanac/properties/p/padding-bottom/
Alternatively, you can solve this by using css3 box-shadow. It also requires changes in the CSS code of the above jsfiddle:
td{
height:1px;
width:1px;
}
.one-size{
box-shadow:inset 0 -1px 0 0 #000;
}
.two-size{
box-shadow:inset 0 -2px 0 0 #000;
}
.three-size{
box-shadow:inset 0 -3px 0 0 #000;
}
Here is demo: http://jsfiddle.net/7dMh7/
Also you can use one of this 3 methods:
table-layout: fixed - the table and its cells will have constant height, but it is not recommended because it makes the layout inflexible.
| |
html, body, table {
height:100%;
width:100%;
}
table-layout:auto - the table's cells automatically recalculate to be the height that allows all the text in all rows to be seen.
html, body {
height:100%;
}
table {
width:100%;
table-layout:auto;
}
td {
height:1px;
border-bottom:1px solid #888;
width:1px;
}
td:last-child{
border-bottom:0;
}
table-layout: inherit - the table's cells will automatically recalculate to the height that allows all the text in all rows to be seen, and the table's width will be 100% of the width of its containing block.
html, body, table {
height:100%;
}
table {
table-layout:inherit;
width:100%;
}
td {
height:1px;
border-bottom:1px solid #888;
width:1px;
}
td:last-child{
border-bottom:0;
}
A:
You will need to change the height of the td in the css as well as have the same class name in each td.
Working example here.
HTML:
