html – 最大宽度不适用于IE7的表格

发布时间：2020-12-14 18:52:16 所属栏目：资源来源：网络整理

导读：那么为什么“max-width”不适用于Internet Explorer 7中的表？最大宽度在其他元素上可用,并且似乎工作正常,但是当应用于表时,我不能使它做任何事情,即简单地忽略最大宽度规则.这是代码： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht

那么为什么“max-width”不适用于Internet Explorer 7中的表？最大宽度在其他元素上可用,并且似乎工作正常,但是当应用于表时,我不能使它做任何事情,即简单地忽略最大宽度规则.这是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Foo</title>
</head>
<body>
    <div style="background-color: Red; max-width: 1000px;">
        <table style="background-color: Green; max-width: 500px;">

                <tr>
                    <td><a href="#" class="action view">View</a></td>
                    <td>7/20/2011</td>
                    <td>James Smith</td>
                    <td>345 NW 23rd Ave Gainesville,FL 32606</td>
                    <td>Alachua Blah blah sf jfh jsdhjs fjsh djkf sdjkhk</td>
                    <td>345621</td>
                    <td>Fred Smith</td>
                </tr>
        </table>
    </div>
</body>
</html>

在Firefox中,表格被正确约束为500px,并且单元格内的文本以适当的方式中断(在单词之间,就像您期望的那样).然而,在IE7中,它已经应用了“无包装”规则.每个单元格都伸展到需要的位置,而不是试图破坏单元格的文本,整个表格只是伸出来忽略最大宽度规则.

怎么了这个废话？如何在IE7中将Max-Width放在表格中？ (在FF& IE8中工作正常)

我试过的是什么不起作用：

table {display：block; }

td {自动换行：break-word; }

table {table-layout：fixed; }

解决方法

WebKit浏览器会忽略为表设置的max-width属性,Chrome和Safari都会像IE7一样使表忽略最大宽度.我建议将max-width属性设置为包装元素,例如div.

见http://jsfiddle.net/P5YPR/1/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!