Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Table Column width must be same for two tables

Tags:

html

css

width

There are two tables with width 600px and 5 Columns each. But, width has not been set for each column. Here, I want to make columns width must be same in both the tables. You can use CSS or jQuery. And, I dont want to fix the column width manually.

HTML Example:

<table width="600" border="1" cellspacing="0" cellpadding="0">     <tr>         <td>hdng 1</td>         <td>hdng 2</td>         <td>hdng 3</td>         <td>hdng 4</td>         <td>hdng 5</td>     </tr> </table> <table width="600" border="1" cellspacing="0" cellpadding="0">     <tr>         <td>content content content</td>         <td>con</td>         <td>content content content</td>         <td>content content content</td>         <td>content content content</td>     </tr> </table> 

Any help would be highly appreciated.

like image 644
Raju Sarvasiddi Avatar asked Aug 30 '12 05:08

Raju Sarvasiddi


People also ask

How do I make columns with different widths in a table?

Change column and row width To change the width, do one of the following: Select the boundary of the column or row you want to move and drag it to the width or height you want. Select the rows or columns and then select Layout and choose your height and width.

How do you adjust column width equally?

On the Page Layout or Layout tab, click Columns. At the bottom of the list, choose More Columns. In the Columns dialog box, adjust the settings under Width and spacing to choose your column width and the spacing between columns. If you want columns of varying widths, deselect the checkbox next to Equal column width.

Can every cell of table have different width?

HTML tables can have different sizes for each column, row or the entire table. Use the style attribute with the width or height properties to specify the size of a table, row or column.

How do you give equal width to all TD tables?

Using table-layout: fixed as a property for table and width: calc(100%/3); for td (assuming there are 3 td 's). With these two properties set, the table cells will be equal in size.


1 Answers

If you want all columns are in the same width, and since you're sure that you'll have exactly five columns in each table, I would suggest:

<table style="table-layout:fixed"> <col style="width:20%" span="5" /> <tr><!--stuffs...--></tr> </table> 
like image 171
Passerby Avatar answered Sep 21 '22 09:09

Passerby