固定列的高度和宽度

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

First off, the code was incorrect. Here's your code corrected, try does it work what you wanted it to:

<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>

Second, the way you're styling is very old-school and hard on you, try creating a CSS class which you can then apply to every element, no need to repeat the rules. In fact, if this will be the only table on your page, you can put something like this inside head:

<style type="text/css">
td {
width: 200px;
height:10px;
}
</style>

That will apply your rules to all tags on page, so you don't have to explicitly style each and every one.

Or you can do:

<style type="text/css">
.exampleclass {
width: 200px;
height:10px;
}
</style>


<table>
<tr style="height: 10px;" >
<td class="exampleclass"></td>
<td class="exampleclass"></td>    
<td class="exampleclass"></td>
<td class="exampleclass"></td>
</tr>
</table>

That way you control your styling from one place, and are also able to apply it to other elements as you see fit.

If there's anything else, ask away.

EDIT: And for fulfilling your requirement of widths being fixed at cost of extra content not showing, apply both answers of Guzzie and QQping. Although if you're ok with varying height, you don't have to set overflow:hidden;

Answer 2

只需将max-width添加到表单元格即可。

Answer 3

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>