如何使我的HTML表格100％宽，并且所有的单元格只与其内容一样宽？ [英] How can I make my HTML table be 100% wide AND have all of its cells only be as wide as their contents?

问题描述

我有这个网格：

如果我将表格宽度从100％更改为自动，表格会水平折叠。

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

img src =https://i.stack.imgur.com/QYIlT.pngalt =enter image description here>

这是不可取的。如何使表列（td元素）自动缩小以适应其内容，同时，表和tr元素填充其父元素的整个空间？

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元素

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?

< table> code>< tr> 元素与其中的< td> 元素一样宽。您不能让每个< td> 小到其内容和使表格整体与可用空间一样宽，因为表格只能和其中的单元格一样宽。

<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.

（即不像大多数HTML元素< table >元素不能独立于它们的内容大小。）

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

您可以将一个单元格设置为尽可能宽， 100％：

You can set one cell to be as wide as possible though, by giving it a width of 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>

请参阅 http：/ /jsfiddle.net/9bp9g/

这篇关于如何使我的HTML表格100％宽，并且所有的单元格只与其内容一样宽？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！