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.
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.
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.
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With