如何让一个表格列填满所有空闲的水平空间? [英] How do I make one table column fill all the spare horizontal space?

问题描述

我有一个由 3 列组成的 HTML 表格.它的固定宽度为 600 像素.

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>

我希望 Qty 和 Actions 列尽可能小(将内容保持在一行)，而 Name 列占据剩余的可用空间.数量和操作列的大小根据内容/字体大小而变化，因此在这种情况下固定宽度将不起作用.

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.

有没有办法在 HTML/CSS 中做到这一点?或者这是我需要打破 Javascript 的东西吗?

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

推荐答案

您可以在该列上应用 width="99%".例如:

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> 

这篇关于如何让一个表格列填满所有空闲的水平空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！