桌子违反了W3C盒子模型，Ie8忽略了固定的桌子宽度！ [英] Table Disobeys W3C Box Model, Ie8 Ignores Fixed Table Width !

问题描述

我很难处理表格​​和列宽.

I'm having hard time with tables and column widths.

更新:我正在使用XHTML Strict 1.0.

Update: I'm using XHTML Strict 1.0.

页面为: http://www.pro-turk.net/try

我遇到的第一个问题是，我有一列固定宽度为100px且填充为4px的列，但它会根据值而违反我的填充.即使填充为0或4，列宽(根据W3C Box模型，两个边框之间的距离)也为156 px.

The first problem I have is, I have a column with a fixed width of 100px and 4px padding, but it disobeys my padding depending on the value. The column width (as the distance between two borders according to W3C Box Model) is 156 px even if padding is 0 or 4. Only the position of the text changes.

根据W3C盒子模型(可在www.pro-turk.net/box_model.png上获得)，边框和填充物未包含在WIDTH属性中，那么为什么渲染错误呢?

According to W3C Box Model ( available at www.pro-turk.net/box_model.png ), borders and paddings aren't included in WIDTH attribute, so why does it render wrongly ?

第二个问题是，当您查看我用IE8给出的页面时，第二行的第一个单元格的固定宽度为150px，但是无论我说什么，它都显示了表总宽度的50％.

The second problem is, when you look the page I gave with IE8, the first cell in the second row has 150px fixed width, but ie shows it about 50% of the total table width regardless of what i say.

推荐答案

您正在使用默认的 auto表布局模式.这样一来，浏览器就可以相当随意地决定为每个列分配多少空间，通常取决于单元格中实际内容的数量.在这种模式下，width仅仅是建议性的.

You're using the default auto table-layout mode. That lets the browser decide fairly arbitrarily how much space to assign to each column, usually depending on the amount of actual content in the cells. In this mode, width is little more than advisory.

如果希望浏览器认真对待列宽，则应在<table>元素上设置table-layout: fixed，并包括具有显式宽度的<col/>元素，或者在第一行的单元格中设置宽度您要固定宽度的列. (其他列将平均分配剩余宽度.)fixed表格布局还允许浏览器更快地呈现.

If you want the browser to take your column widths seriously you should set table-layout: fixed on the <table> element, and either include <col/> elements with explicit widths, or set widths on the cells in the first row, for the columns you want to be fixed-width. (The other columns will share the remain width equally.) fixed table layout also allows the browser to render faster.

对于您的页面，使用CSS定位可能会更好.当然，对于似乎仅是将图像浮动到左的内部表而言.要避免嵌套表.

For your page you might be better off with CSS positioning. Certainly for the internal table that seems to exist only to float-left the image. Nested tables are to be avoided.

这篇关于桌子违反了W3C盒子模型，Ie8忽略了固定的桌子宽度！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！