I have a table where i want all the row heights and column widths do be fixed. I'm running into issues when the content of a cell is too long to fit in the fixed space. the table then grows to fit the content. consider the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>tdoverflow</title>
<style type="text/css" media="screen">
table {
width: 200px;
}
td {
border-left: 2px solid orange;
border-right: 2px solid orange;
border-bottom: 1px dashed black;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="5">
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data this really long data </td><td></td><td></td><td></td><td></td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
</body>
</html>
I want every row to be the same height. I tried puting overflow: hidden/visible in td, no luck. i tried making the table a specified height, no luck. i tried making the td and/or tr a specified height and max-height, no luck. i don't want to use colspan because i want the orange bars to remain.
is there any way to force the table to have fixed row heights and column widths and make the content just overflow over the orange bars?
thanks!
Last edited by Duffman12; 03-21-2008 at 06:33 PM..
Reason: forgot to add something
i need the table to stay intact, and i need the content to overflow into the cell to the right staying on one line.
In that case I think you will have to use Kor's idea, but have yet another div inside his whose width is 1000px or something, so that they extend to the right within the outer divs.
In that case I think you will have to use Kor's idea, but have yet another div inside his whose width is 1000px or something, so that they extend to the right within the outer divs.
that works i ff, but alas, ie still won't cooperate
It sounds silly, but you must insert a <div> in each <td> tag like this:
<td>
<div style="height:20px; max-height:20px; min-height:20px; ">
Your text goes here
</div>
</td>
Obviously, you substitute whatever you want for "20px".
Before you post, read our: 
Easy Solution that Absolutely Works
