HTML table 单元格 <td> 的默认宽度是多少?

What is the default width of an HTML table cell <td>?

我没能找到这个问题的答案:规范或 UA 文档中哪里定义了 <td> 的默认宽度?

我搜索了 HTML Living Standard, the HTML5 Recommendation 和其他各种来源。

我的理解(基于使用和观察)是 table 单元格默认情况下会占据其所在列的整个宽度。如果列中存在其他单元格,则不能为单元格指定与列不同的宽度。

我正在寻找对此行为的官方确认,最好是在 W3C 或用户代理文档中。但是任何权威参考都是acceptable.

这是计算 table 列宽度的 W3C 标准。基本上它留给实施 browser/agent.

If an author specifies no width information for a column, a user agent may not be able to incrementally format the table since it must wait for the entire column of data to arrive in order to allot an appropriate width.

If column widths prove to be too narrow for the contents of a particular table cell, user agents may choose to reflow the table.

来源:http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.4

注意:这是 HTML4 文档。

table 单元格的最小宽度为 0 或该单元格中最大字词或图像的大小。

Table Sizing Algorithm

The default sizing algorithm requires two passes through the table data. In the first pass, word wrapping is disabled, and the user agent keeps track of the minimum and maximum width of each cell. The maximum width is given by the widest line. As word wrap has been disabled, paragraphs are treated as long lines unless broken by
elements. The minimum width is given by the widest word or image etc. taking into account leading indents and list bullets etc. In other words, if you were to format the cell's content in a window of its own, determine the minimum width you could make the window before things begin to be clipped.

The minimum and maximum cell widths are then used to determine the corresponding minimum and maximum widths for the columns. These in turn, are used to find the minimum and maximum width for the table. Note that cells can contain nested tables, but this doesn't complicate the code significantly. The next step is to assign column widths according to the current window size (more accurately - the width between the left and right margins).

The table borders and intercell margins need to be included in the assignment step. There are three cases:

  1. The minimum table width is equal to or wider than the available space. In this case, assign the minimum widths and allow the user to scroll horizontally. For conversion to braille, it will be necessary to replace the cells by references to notes containing their full content. By convention these appear before the table.
  2. The maximum table width fits within the available space. In this case, set the columns to their maximum widths.
  3. The maximum width of the table is greater than the available space, but the minimum table width is smaller. In this case, find the difference between the available space and the minimum table width, lets call it W. Lets also call D the difference between maximum and minimum width of the table.

For each column, let d be the the difference between maximum and minimum width of that column. Now set the column's width to the minimum width plus d times W over D. This makes columns with lots of text wider than columns with smaller amounts.

This assignment step is then repeated for nested tables. In this case, the width of the enclosing table's cell plays the role of the current window size in the above description. This process is repeated recursively for all nested tables.

If the COLSPEC attribute specifies the column widths explicitly, the user agent can attempt to use these values. If subsequently, one of the cells overflows its column width, the two pass mechanism may be invoked to redraw the table with more appropriate widths. If the attribute specifies relative widths, then the two pass model is always needed.

The column width assignment algorithm is then modified:

  • Explicit widths from the COLSPEC attribute should be used when given, provided they are greater than the minimum column width, otherwise the latter should be used.
  • For relative widths, the surplus space W, as defined above, is divided up between the columns appropriately, ensuring that each column is given at least its minimum width. If W is zero or negative, column widths should be increased over the minimum width to meet the relative width requirements.

If the table width is specified with the WIDTH attribute, the user agent attempts to set column widths to match. The WIDTH attribute should be disregarded if this results in columns having less than their minimum widths.

table 单元格的 physical/visual 宽度不是由 HTML 定义的,而是由 CSS 定义的。 CSS 2.1 规范有一整节专门介绍 table layout,以补充 HTML 对表格数据的描述。

此外,CSS本身does not fully define如何计算单元格的宽度。它使用固定的 table 布局算法:

In the fixed table layout algorithm, the width of each column is determined as follows:

  1. A column element with a value other than 'auto' for the 'width' property sets the width for that column.
  2. Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns.
  3. Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

The width of the table is then the greater of the value of the 'width' property for the table element and the sum of the column widths (plus cell spacing or borders). If the table is wider than the columns, the extra space should be distributed over the columns.

但它没有提供任何关于自动 table 布局的粗略指南,用户代理可以自由遵循或偏离这些指南(它列出了与 fixed 类似的分步过程table 布局,但整个列表是非规范的)。 通常 您可以期待 most scenarios — as you observe, an auto-sized table cell generally takes up as much space as required by its content, and no more. But dig into edge cases, and you'll find all sorts of crazy 中 UA 的一致行为。