如何使我的HTML表100%宽，并使其所有单元格都只有其内容的宽度?

I have this grid:

我有这个表格:

If I change the tables width from 100% to auto, table collapses horizontally.

如果我将表的宽度从100%更改为自动，表将水平地折叠。

Which is not desirable. How can I make the table columns (td elements) shrink automatically to fit their content, while at the same time, the table, and tr elements fill the entire space of their parent?

这是不可取的。如何使表列(td元素)自动收缩以适应它们的内容，同时，表和tr元素填充它们父元素的整个空间?

2 个解决方案

#1

How can I make the table columns (td elements) shrink automatically to fit their content, while at the same time, the table, and tr elements fill the entire space of their parent?

如何使表列(td元素)自动收缩以适应它们的内容，同时，表和tr元素填充它们父元素的整个空间?

<table> and <tr> elements are as wide as the <td> elements inside of them. You can’t have every <td> be as small as its contents and have the table as a whole be as wide as the space available, because the table can only be as wide as the cells inside it.

表>和元素宽度与其中元素宽度相同。您不可能让每一个都像它的内容一样小，并且让整个表像可用空间一样宽，因为这个表只能像它里面的单元格一样宽。

(i.e. unlike most HTML elements, <table> elements can’t be sized independently from their contents.)

(也就是说，与大多数HTML元素不同，

元素不能独立于其内容进行大小设置。)

You can set one cell to be as wide as possible though, by giving it a width of 100%:

你可以设置一个单元格尽可能的宽，给它一个100%的宽度:

<table style="width: 100%; background: grey; color: white;">
     <tr>
         <td style="background: red;">Content</td>
         <td style="background: green;">Content</td>
         <td style="background: blue; width: 100%;">Content</td>
     </tr>
</table>

See http://jsfiddle.net/9bp9g/

参见http://jsfiddle.net/9bp9g/

#2

The width of the <td> will be defined by the width of the <td> in first <tr>.

将的宽度定义为在first 中的宽度。

Otherwise you can use CSS to define rules for <td> width like:

否则可以使用CSS为宽度定义规则，如:

.myform tr td{padding:0px;margin:0px;}
.myform td{width:200px;}