Given the following example: http://jsfiddle.net/upsidown/z4m7r/
HTML:
<table class="main-table" cellspacing="20">
<tr>
<td style="height:100%;"><table class="sub-table"><tr><td>Some text</td></tr><tr><td class="bottom-align">Some bottom aligned element</td></tr></table></td>
<td>Some very long text. Some very long text. Some very long text. Some very long text. Some very long text. Some very long text. </td>
<td>Some other text</td>
</tr>
</table>
CSS:
.main-table {
width:300px;
vertical-align: top;
}
.main-table td {
vertical-align: top;
}
.sub-table {
height:100%;
}
td {
border:2px solid black;
}
td.bottom-align {
vertical-align: bottom;
background:yellow;
}
The yellow cell text should be vertically aligned at the bottom. This works on Firefox but not on Safari / Chrome (webkit) browsers.
Any idea how I can achieve that? Thanks in advance.
First off: Why are you using tables and nested tables at that? Is this really for tabluar data?
To your problem: Webkit most likely abides strictly by the CSS rules for height, which says, that height in per cent only applies if the containing block has an explicit height.
That means that you need to give the main-table a height (the height of a cell/row is explicitly calculated from the height of the table and the other cells/rows in the table). And if that is in turn in per cent, then also the next parent (here body), and so forth.
So either something like
.main-table { height: 500px; }
or
html, body, .main-table { height: 100%; }
will help.
(BTW, the height: 100% on the cell makes no sense.)
A simple solution is to fill the space with padding:
td.bottom-align {
padding-top:100%;
vertical-align: bottom;
background:yellow;
}
Here's the demo: http://jsfiddle.net/z4m7r/11/
--EDIT--
Set the parent table at 100% height and it should do the trick. Demo: http://jsfiddle.net/z4m7r/9/
I've updated your jsfiddle: http://jsfiddle.net/z4m7r/6/
To start with, I wouldn't use a table inside of another table as it will make the markup a nightmare to read and maintain. It's also difficult to put one row at the bottom of the table and the other at the bottom. Instead I just put two divs inside the cell:
<td class="firstcell" style="height:200px;">
<div>Some text</div>
<div class="bottom">Some bottom aligned text</div>
</td>
Next, I set the position of the parent cell to relative, and made the bottom div absolute:
.firstcell {
position: relative;
width: 100px;
}
.firstcell > div {
border: solid thin black;
}
.bottom {
position: absolute;
bottom: 0;
background: yellow;
}
Related
I like tables since text align is pretty nice there. If we have a text inside a <td> like <td>Sample Text</td>, it doesn't matter how much height the cell have, the text will be vertically aligned on center. The text will be automatically re aligned if there is less space in the cell for the text to accommodate.
But, if I have a span inside the td, having the same height of td, the text will be aligned on top. I can give a fixed padding inside span for the text to align vertically, but then at the time of resizing, it won't pull the text upward inside the cell, leaving a permanent top padding.
What I want is to make the text behave inside a span (which is inside a td), to behave exactly as it is inside a td. Below image describes what I am trying to say;
Here is a demo fiddle, I just want to display text inside span to display exactly as it behaves inside the td.
HTML:
<table cellpadding="0" cellspacing="0">
<tr>
<td>Sample Text</td>
</tr>
<tr>
<td>Sample Text rearranged</td>
</tr>
<tr>
<td><span>Sample Text</span></td>
</tr>
</table>
CSS:
td{
border: solid 1px #000;
height: 40px;
width: 100px;
}
span{
height: 40px;
display: block;
background: orange;
}
One easy approach is setting a line-height. But this won't work, if you have fluid heights and/or multiple lines of text.
span {
line-height: 40px;
}
Another way inside the td would be vertical-align: middle; along with removing display: block;. You can set the background color on the td.
td {
background-color: orange;
}
span {
vertical-align: middle;
}
You have set display:block to your span that's why it is not vertically centered. Set background for TD instead of SPAN.
You can set this style:
div, span{
width:100%;
text-align:center;
padding-top:5px;
}
set display:table to the parent tag and display:table-cell and vertical-align:middle to the span like this:
DEMO
this works for all elements not just td
HTML
<div>
<span>
some text
</span>
</div>
CSS
div{
width:100px;
height:100px;
background:gold;
display:table;
}
span{
display:table-cell;
vertical-align:middle;
}
I dont really know the wright way, but you can put padding-top. Or use what you said is working. but if you include
line-height:100px; /* the same as your div height */
will work. But if it is just one line. Otherwise you have to include padding, or I think so.
Okay first I must tell you the difference between a div and a span.
A div is a block element ( which takes the full width of browser )
while a span is an inline element ( which takes the width of the content )
So when you put a span inside a td, It is not actually taking the full width . So , either you can convert it to div or make the span as display: block;
Now since the width is adjusted now, we must also adjust the height. Since span understands the height of the span as the height of the content, so we give a line height of 40px. i.e. line-height: 40px; which is the height of the td.
As a summary .. display block is to take the full width and line height is for making the height as much as we want. In our case we made it equal to the td height.
Hope this helps !
span {
background: orange;
line-height: 40px;
display:block;}
http://jsfiddle.net/f45Sv/8/
I have a simple table with 1 TD with vertical-align:middle;. This TD contains an Image :
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
height:43px;width:43px;
}
span
{
vertical-align:middle;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>
<img src='http://static.jsbin.com/images/favicon.png'/>
</td>
</tr>
</table>
</body>
</html>
Everything is Ok and the IMG is vertical-aligned.
But If I add another elements after that Image ( a span for example ) :
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
height:43px;width:43px;
}
span
{
vertical-align:middle;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>
<img src='http://static.jsbin.com/images/favicon.png'/>
<span>aaa</span>
</td>
</tr>
</table>
</body>
</html>
Question
Doesn't the vertical align of the TD should vertical align all its childs ?
How can I make the span to be centered as well ?
NB
I don't want to add another TD , nor using float with padding/margin. IE8+.
edit:
Desired result :
Question
Doesn't the vertical align of the TD should vertical align all its childs ?
NO.
When you apply vertical-align to td, it is only applied to td, and is not inherited by any of its children.
If i have a TD with only span in it - it will vertical align. If I had a TD with only IMG inside it - it will also align.
This is because of the way vertical-align for td works. The total height of the cell i.e td is calculated and the whole cell is aligned vertically.
If there is a single img, then the height of td is same as that of img, so it seems that vertical-align for img is also middle. But actually, the td is vertically aligned to the middle with the img as vertical-align : baseline
Same is the case when there is a single span.
but if i have both - it doesn't. why is that ?
Because now, the height of td is the combined height of both img + span. So, actually, td is vertically aligned in the middle, but not img and span.
How can I make the span to be centered as well ?
You need to apply this CSS :
td > * {
vertical-align : middle;
}
This will apply the CSS to all the children.
Check the JSFiddle for a better picture.
Hope, this answers your question.
You can just use vertical-align: middle; to your span
img
{
height:43px;width:43px;
display: inline;
vertical-align: middle;
}
span
{
vertical-align:middle;
display: inline;
}
your jsbin
As per comment
You may think as if td is given vertical-align: middle; then it should align all the contents inside this but having an image and a span in which browser is understanding the image is what? : is this inline or inline-block, so you need to set display: inline or inline-block; Then you may see its working only applying display property for image. demo
Edit
img tag : source: display inline vs inline-block
They are "block" elements in that they have a width and a height.
It's true, they are both - or more precisely, they are "inline block" elements. This means that they flow inline like text, but also have a width and height like block elements.
Also check this:
Replaced Elements
A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images ( tags), plugins ( tags), and form elements (, , , and tags). All other elements types can be referred to as non-replaced elements.
Replaced elements can have intrinsic dimensions—width and height values that are defined by the element itself, rather than by its surroundings in the document. For example, if an image element has a width set to auto, the width of the linked image file will be used. Intrinsic dimensions also define an intrinsic ratio that’s used to determine the computed dimensions of the element should only one dimension be specified. For example, if only the width is specified for an image element—at, say, 100px—and the actual image is 200 pixels wide and 100 pixels high, the height of the element will be scaled by the same amount, to 50px.
Replaced elements can also have visual formatting requirements imposed by the element, outside of the control of CSS; for example, the user interface controls rendered for form elements.
In an inline formatting context, you can also think of a replaced element as being one that acts as a single, big character for the purposes of wrapping and layout. A width and height can be specified for replaced inline elements, in which case the height of the line box in which the element is positioned is made tall enough to accommodate the replaced element, including any specified box properties.
Here's a JS fiddle solution
fiddle
Here's the css
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
display: inline;
height: 43px;
width: 43px;
position: relative !important;
float: left;
}
span
{
height: auto !important;
width: 80%;
float: right;
position: relative;
vertical-align: middle !important;
text-align: left;
}
In all the cases, the vertical-align: middle; on the td does what is expected of it. That is, align the td to the center of that row and the entire contents of the td to the vertical middle (by default) leaving equal spaces at the top and the bottom.
Here is what the W3 Spec says about vertical-align: middle:
The center of the cell is aligned with the center of the rows it spans.
Row height calculation:
The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells.
In CSS 2.1, the height of a cell box is the minimum height required by the content. The table cell's 'height' property can influence the height of the row (see above), but it does not increase the height of the cell box.
Cell boxes that are smaller than the height of the row receive extra top or bottom padding.
As a result of the above, the height of the tr and the td becomes 100px but the cell box takes up only the amount of height required by the contents (img height = 43px). Now since the Cell box is smaller than the row height, extra padding is added like shown in Box 5 of the image above and thus makes the contents also get aligned to the middle.
TD has only image:
When there is only an img, the content height is equal to the height of the img. So it gets positioned to the middle.
As can be seen in the above image, this does not require a vertical-align: middle on the img explicitly because the td aligns its contents to the middle.
TD has only inline data:
When the td has only a span or span plus an inline div, the height of the content is equal to the default line-height for text (or any specified line-height). In this case also, the td aligns it correctly.
When the text content goes beyond the first line (refer to the demo), you can see that the td automatically pushes the first-line (marked in cyan background) upwards to ensure that the contents on the whole is aligned to the middle (not just a single line).
TD has an image and a span:
When we put an img and a span (inline text) within the td, the content height becomes equal to the height of the img plus the line-height of the second and subsequent lines.
In this situation, there are two possible cases as described below:
Case 1 - img tag has no vertical-align specified
In this case, the img is aligned to the baseline (default). Then the td aligns the entire content to the middle. This means the td leaves around 28.5px (= (100-43)/2) gap at the top and the bottom of the content. Again, the vertical-align on td does the job, it puts the contents in the middle (that is, leave equal gap on top and bottom). But the text gets pushed down because img height is more.
If we reduce the img height to less than the line height (say 10px), we can see that even with img + span it gets aligned to the middle.
Case 2 - img tag has vertical-align: middle
In this case also vertical-align on the td does the same as what it did for Case 1. However, the text in this case is near the middle because the img is also aligned to the middle of the line.
table {
border: solid 1px red;
}
td {
height: 100px;
width: 200px;
vertical-align: middle;
border: solid 1px green;
}
img {
height: 43px;
width: 43px;
border: solid 1px green;
}
.one td + td img {
vertical-align: middle;
}
.three td + td img {
height: 10px;
width: 10px;
}
.four img {
vertical-align: middle;
}
.five img + img{
height: 50px;
width: 50px;
}
td:first-line {
background-color: cyan;
}
div {
display: inline;
}
<table>
<tr class='one'>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
</td>
</tr>
<tr class='two'>
<td>
<div>aaa</div>
<span>aaa</span>
</td>
<td>
<div>aaa</div>
<span>aaa aaaaaaa aaaaaaaa aaaaaaaa</span>
</td>
</tr>
<tr class='three'>
<td>
Case 1
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
<td>
Case 1
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
</tr>
<tr class='four'>
<td>
Case 2
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span + more text.......</span>
</td>
</tr>
<tr class='five'>
<td>
Case 3
<img src='http://static.jsbin.com/images/favicon.png' />
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span text...</span>
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span + more text.......</span>
</td>
</tr>
</table>
Just add vertical-align:middle; to your img style?
Demo
<style>
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
width:100%;
border:solid 1px green;
vertical-align:middle;
line-height:100px;
}
img
{
height:43px;width:43px;
vertical-align:middle;
}
</style>
DEMO
just add this class:
td *{
vertical-align:middle
}
Edit:
question is why when you add a pic to the td text goes bottom of pic and not any more middle of td.
this is my answer:
when you set td vertical-align to middle it should not set all content vertical-align to middle, they are still baseline. and when you add a pic to the text, the line height rise to the height of image and text is bottom of this height, so you need to set vertical-align to middle for fix this problem.
here you can see what i said: DEMO
and sorry about my bad english
Is this what you mean? http://jsfiddle.net/JFVNq/
The reason is spans are treated as inline so you need to make them block.
CSS for the span:
td.vert span
{
vertical-align: middle;
display: block;
}
I think we are all nearly there but
td img,
td span {
display:inline-block;
vertical-align:middle;
}
seems to work.
Codepen Example
Or am I missing something?
This CSS attribute doesn't go on any other kinds of elements. When the novice developer applies vertical-align to normal block elements (like a standard ) most browsers set the value to inherit to all inline children of that element.
You simply need to add vertical-align: middle to the <img> class.
Your CSS should look like this...
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
height:43px;width:43px;
vertical-align: middle;
}
You can view the Sample Fiddle...
Just move your vertical-align: middle from the span to the image.
The image will align itself on the text; works better than the opposite ;)
img
{
height:43px;width:43px;
vertical-align:middle;
}
http://jsfiddle.net/ZnpNF/1/
i have a header, which takes the whole width of the screen. in my header i want to place 3 divs, which should be aligned next to each other. the div's on the side being fixed-width, and the middle should take the other space available. so i don't know the width of the header, and i don't know the width of the middle container.
right now i have this code:
html:
<div id="header">
<div id="menu-container">
menu goes here
</div>
<div id="logo-container">
logo goes here
</div>
<div id="music-player-container">
music player comes here
</div>
</div>
and css:
#header {
height: 200px;
margin: 0;
padding: 0;
border: 0;
}
#menu-container {
width: 400px;
height: inherit;
float: left;
}
#logo-container {
height: 100%;
background-image: url('../images/logo.png');
background-repeat: no-repeat;
background-position: center;
float: left;
width: auto;
}
#music-player-container {
width: 400px;
height: inherit;
float: left;
}
which should be working according to other problems with the float.... it doesn't
You can use floated divs with negative margins:
http://jsfiddle.net/cy5E7/1/
In your case:
http://jsfiddle.net/AjVHy/
Negative margins are better then just left/right float fixed divs. We don't get messed layout if user have very small window. Look at this bad example (resize browser window to small width): http://jsfiddle.net/surendraVsingh/qZLHb/1/ (thanks to #SVS). In normal float layout, all floated divs are on place only if parent container is wide enough.
Another disadvantage of standard float layout is when we want column layout but we don't know height of middle content, look like it can look
float layout, dynamic content height
negative margins layout, dynamic content height
Switch the order of your second and third divs then use this CSS.
#menu-container, #music-player-container {
float:left;
width: 400px;
}
#music-player-container {
float:right;
}
#logo-container {
margin:0 400px;
}
jsfiddle example
I'm not exactly sure of what you are planning to code up, but in my perspective, I see it like this: "You want to have 3 columns, column 1 being of a fixed with, column 2 a fluid width and column 3 yet again of fixed width."
What I fail to understand here is that, in the case of a really small width monitor (like a 1024x768 resolution, for instance), having a 400px column on both sides would leave you with just 224px of logo space. It would look un-natural.
Anyways, if you would still like to continue, I suggest you enclose all the three divs [menu-container, logo-container & music-player-container] inside another element called header (If you're using HTML5) or another div with any name you like (If you're using <= HTML 4.01) and then fix it's width to 100%; and a fixed height of 200px;.
Then let the menu-container, float: left; and the music-player-container float: right;. This will give space to the logo-container. Let the logo-container have a width: auto;. Having done this will give you a basic semi-fluid header layout, if I'm right.
Cheers, hope your question gets solved quick :)
I understand what you're trying to do, and I am sorry to say that I have yet to find a solution for this issue without using some ugly form of JavaScript/jQuery.
Essentially, the problem is that CSS does not have any properties (not even when fiddling with display properties) that will allow you to have two elements, one with fixed width and the other taking up the remainder of the space in the div. There are some options with float that can allow you to very closely simulate this, but I can tell you that they are unlikely to give you what you really want.
There is a resource out there, a project called Bootstrap, that you can install like any other jQuery plugin (or you can actually use it like a "CSS" plugin - you'll see what I mean - if you don't want the JavaScript), that will enable you to do what you want.
Here is the link: http://twitter.github.com/bootstrap/download.html
I strongly recommend that you review the documentation first to make sure you are aware of any caveats/limitations.
Good Luck!
EDIT: I like rogal's answer, but before using it you should bear in mind that doing so removes your ability to add a left border and makes it very difficult to apply background images to the div with the negative margin.
another option:
#header {
display: table;
height: 200px;
margin: 0;
padding: 0;
border: none;
}
#header > div {
display: table-cell;
height: inherit;
}
#menu-container, #music-player-container {
width: 400px;
}
#logo-container {
background-image: url('../images/logo.png');
background-repeat: no-repeat;
background-position: center;
}
HTH
You could of course use a table..
-hides-
Something like this inside the header div:
<table width=100%>
<tr>
<td width=200>
menu
</td>
<td>
logo
</td>
<td width=400>
music
</td>
</tr>
</table>
(too lazy for CSS atm)
Can't think of a very good way to do this. Not an ideal solution, but you could turn this into a table.
<table>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
</table>
Then you can just set the dimensions of the div and the td that contains it to be the same.
I have these code block:
<table border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>
I'd like to show my table in the center of the screen (vertically and horizontally).
Here is a demo.
How can I do that?
Horizontal centering is easy. You just need to set both margins to "auto":
table {
margin-left: auto;
margin-right: auto;
}
Vertical centering usually is achieved by setting the parent element display type to table-cell and using vertical-align property. Assuming you have a <div class="wrapper"> around your table:
.wrapper {
display: table-cell;
vertical-align: middle;
}
More detailed information may be found on http://www.w3.org/Style/Examples/007/center
If you need support for older versions of Internet Explorer (I do not know what works in what version of this strange and rarely used browser ;-) ) then you may want to search the web for more information, like: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html (just a first hit, which seems to mention IE)
This fixes the box dead center on the screen:
HTML
<table class="box" border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>
CSS
.box {
width:300px;
height:300px;
background-color:#d9d9d9;
position:fixed;
margin-left:-150px; /* half of width */
margin-top:-150px; /* half of height */
top:50%;
left:50%;
}
View Results
http://jsfiddle.net/bukov/wJ7dY/168/
I think this should do the trick:
<table border="1px" align="center">
According to http://w3schools.com/tags/tag_table.asp this is deprecated, but try it. If it does not work, go for styles, as mentioned on the site.
For horizontal alignment (No CSS)
Just insert an align attribute inside the table tag
<table align="center"></table
I've been using this little cheat for a while now. You might enjoy it. nest the table you want to center in another table:
<table height=100% width=100%>
<td align=center valign=center>
(add your table here)
</td>
</table>
the align and valign put the table exactly in the middle of the screen, no matter what else is going on.
One way to center any element of unknown height and width both horizontally and vertically:
table {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See Example
Alternatively, use a flex container:
.parent-element {
display: flex;
justify-content: center;
align-items: center;
}
This guy had the magic wand we were looking for, guys.
To quote his answer:
just add "position:fixed" and it will keep it in view even if you scroll down. see it at http://jsfiddle.net/XEUbc/1/
#mydiv {
position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
I tried above align attribute in HTML5. It is not supported. Also I tried flex-align and vertival-align with style attributes. Still not able to place TABLE in center of screen.
The following style place table in center horizontally.
style="margin:auto;"
I have a table which should always occupy a certain percentage of the height of the screen. Most of the rows are of fixed height, but I have one row that should stretch to fill the available space. In the event that the contents of a cell in that row overflows the desired height, I'll like the contents to clip using overflow:hidden.
Unfortunately, tables and rows do not respect the max-height property. (This is in the W3C spec). When there is too much text in the cell, the table gets taller, instead of sticking to the specified percentage.
I can get the table cell to behave if I specify a fixed height in pixels for it, but that defeats the purpose of having it automatically stretch to fill available space.
I've tried using divs, but can't seem to find the magic formula. If I use divs with display:table, :table-row, and :table-cell the divs act just like a table.
Any clues on how I can simulate a max-height property on a table?
<head>
<style>
table {
width: 50%;
height: 50%;
border-spacing: 0;
}
td {
border: 1px solid black;
}
.headfoot {
height: 20px;
}
#content {
overflow: hidden;
}
</style>
</head>
<body>
<table>
<tr class="headfoot"><td>header</td></tr>
<tr>
<td>
<div id="content">
put lots of text here
</div>
</td>
<tr>
<tr class="headfoot"><td>footer</td></tr>
</table>
</body>
Just put the labels in a div inside the TD and put the height and overflow.. like below.
<table>
<tr>
<td><div style="height:40px; overflow:hidden">Sample</div></td>
<td><div style="height:40px; overflow:hidden">Text</div></td>
<td><div style="height:40px; overflow:hidden">Here</div></td>
</tr>
</table>
We finally found an answer of sorts. First, the problem: the table always sizes itself around the content, rather than forcing the content to fit in the table. That limits your options.
We did it by setting the content div to display:none, letting the table size itself, and then in javascript setting the height and width of the content div to the inner height and width of the enclosing td tag. Show the content div. Repeat the process when the window is resized.
Possibly not cross browser but I managed get this: http://jsfiddle.net/QexkH/
basically it requires a fixed height header and footer. and it absolute positions the table.
table {
width: 50%;
height: 50%;
border-spacing: 0;
position:absolute;
}
td {
border: 1px solid black;
}
#content {
position:absolute;
width:100%;
left:0px;
top:20px;
bottom:20px;
overflow: hidden;
}
What I found !!!, In tables CSS td{height:60px;} works same as CSS td{min-height:60px;}
I know that situation when cells height looks bad . This javascript solution don't need overflow hidden.
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
I've solved just using this plugin: http://dotdotdot.frebsite.nl/
it automatically sets a max height to the target and adds three dots
I had the same problem with a table layout I was creating. I used Joseph Marikle's solution but made it work for FireFox as well, and added a table-row style for good measure. Pure CSS solution since using Javascript for this seems completely unnecessary and overkill.
html
<div class='wrapper'>
<div class='table'>
<div class='table-row'>
<div class='table-cell'>
content here
</div>
<div class='table-cell'>
<div class='cell-wrap'>
lots of content here
</div>
</div>
<div class='table-cell'>
content here
</div>
<div class='table-cell'>
content here
</div>
</div>
</div>
</div>
css
.wrapper {height: 200px;}
.table {position: relative; overflow: hidden; display: table; width: 100%; height: 50%;}
.table-row {display: table-row; height: 100%;}
.table-cell {position: relative; overflow: hidden; display: table-cell;}
.cell-wrap {position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%;}
You need a wrapper around the table if you want the table to respect a percentage height, otherwise you can just set a pixel height on the table element.
Another way around it that may/may not suit but surely the simplest:
td {
display: table-caption;
}