计算列的宽度比列的CSS声明宽度不同。如何确定浏览器的宽度？ [英] Computed column width is different than css declared width for column. How does browser decide width?

问题描述

让我们说我有一个html表的750px一个css声明宽度。它有5列，每列有50像素的宽度，宣布用css（所有TD的有一个50像素的宽度）。显然，列的宽度的总和是250像素小于750px。

Let's say I have an html table with a css declared width of 750px. It has 5 columns and each column has a width of 50px, declared using css (all td's have a 50px width). Obviously, the sum of the columns' widths is 250px which is less than 750px.

在浏览器呈现表中，每一列都有不同的计算宽度。我有一个列有只有5位但在100像素的计算宽度（很多超过5＆NBSP以上;的）。

When the browser renders the table, each column has a different computed width. I have one column which has 5 spaces only but a computed width of over 100px ( a lot more than 5  's).

中的所有列适合他们包括文字加上一些额外的空格。没有硬codeD列宽度都在标记。刚刚在CSS一个50像素的'TD'。

All columns fit their included text plus some extra blank spaces. No hard coded column widths are in the markup. Just a single 50px in the css for the 'td'.

如何在浏览器计算每列的呈现宽度？

How does the browser compute the rendered width of each column?

推荐答案

当您设置表列的宽度，它只是一个推荐的最小宽度，浏览器尝试接受如果可能的话。列的实际宽度从其内容的大小来计算的，均匀除以剩余空间中的列之间。

When you set the width of table columns, it's just a recommended minimum width, that the browser tries to honor if possible. The actual width of the columns are calculated from the size of their content, dividing the leftover space evenly between the columns.

如果任何列的最终会比所指定的宽度窄时，浏览器将试图调整它，如果有在其他列的自由空间，但你的情况的列已经超过最小

If any of the columns would end up narrower than the width that you specified, the browser would try to adjust it if there is free space in other columns, but in your case the columns are already over the minimum.

实际的算法来计算单元大小不同的浏览器到浏览器，这意味着列最终会稍有不同，这取决于你用​​什么浏览器。

The actual algorithm to calculate the cell sizes differs from browser to browser, which means that the columns will end up slightly different depending on what browser you use.

这篇关于计算列的宽度比列的CSS声明宽度不同。如何确定浏览器的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！