Question

I am having a table as follows:

<table>
<tr style ="height: 10px;" >
<td style="width: 200px, height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td>    

</tr>
</table>

The problem is, when the contents in the second column of any row are slightly large, the width of the second column exceeds 150px, and to compensate the width of the first column reduces. How can I prevent that from happening. I want to widths to not change and even if the extra texts are not shown it`s fine.

I also want the height of the rows and columns to be of 3 lines of text and fixed in height.

Answer 1

You should set the table’s style to fixed like this and add the total width of the table

<table style='table-layout:fixed' width='300px'>

Firefox may not like to see table cells with overflowing long texts cause of fixed column-widths, to better display this you should set the following TD style in your css or on your current page

<style>
 td {overflow:hidden;}
</style>