Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make one table column fill all the spare horizontal space?

I have a HTML table consisting of 3 columns. It has a fixed width of 600px.

<table>   <tr>     <td>Name</td>     <td>Qty</td>     <td>Actions</td>   </tr> </table> 

I want the Qty and Actions columns to be as small as possible (keeping the content to one line) and the Name column to take up the rest of the available space. The size of the Qty and Actions column change depending on content/font size so fixed widths will not work in this case.

Is there a way of doing this in HTML/CSS? Or is this something I need to break out the Javascript for?

like image 308
gsteinert Avatar asked Aug 21 '11 13:08

gsteinert


People also ask

How do you evenly space a table cell?

Select the columns or rows that you want to make the same size, and then click the Table Layout tab. Under Cells, click Distribute Rows or Distribute Columns.

How do you make a full width occupy 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.


1 Answers

You can apply width="99%" on that column. For example:

<table>    <tr>      <td width="99%">Name</td>      <td>Qty</td>      <td>Actions</td>    </tr>  </table>  
like image 90
Ranta Avatar answered Sep 24 '22 13:09

Ranta