In the below HTML fragment, how can I make the width of a column that contains 'LAST' occupy the remainder of the row, and widths of columns that contain 'COLUMN ONE' and 'COLUMN TWO' be just wide enough to contain their content, and not larger.
Thank you
table { border-collapse: collapse; } table td { border: 1px solid black; }
<table> <tr> <td> <table width="100%"> <tr> <td> <span> COLUMN </span> <span> ONE </span> </td> <td> COLUMN TWO </td> <td> LAST </td> </tr> </table> </td> </tr> <tr> <td> ANOTHER ROW </td> </tr> </table>
You need to set the margin of the body to 0 for the table to stretch the full width. Alternatively, you can set the margin of the table to a negative number as well.
To prevent cells (rows) from expanding vertically, you have to set a fixed height for table rows. Select the relevant rows and, on the Table Tools Layout tab, click Properties. On the Row tab, select "Specify height" and then choose "Exactly" for "Row height is." Specify the desired amount.
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.
Select the column or columns that you want to change. On the Home tab, in the Cells group, click Format. Under Cell Size, click Column Width. In the Column width box, type the value that you want.
You will need to tell the first two columns not to wrap and give the last column a width of 99%:
<table width="100%"> <tr> <td style="white-space: nowrap;"> <span> COLUMN </span> <span> ONE </span> </td> <td style="white-space: nowrap;"> COLUMN TWO </td> <td width="99%"> LAST </td> </tr> </table>
Edit: You should put that all styles / presentation in (external...) css.
Using classes for the columns (you could use css3 selectors like nth-child()
instead if you only target modern browsers):
html:
<tr> <td class="col1"> // etc
css:
.col1, .col2 { white-space: nowrap; } .col3 { width: 99%; }
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