简体   繁体   中英

HTML td will not break to new line with <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

I am having an issue with getting table cell to respond to styles as expected. Please do not recommend using div and CSS. I know it is better, but not appropriate for this particular issue. I also cannot change the doctype because it is CMS with closed source. This works as expected with the XHTML doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
.foottable{
    width:100%;
    table-layout:fixed;
}
.foottable td{
    display: block;
    width: 100%;
}
</style>
</head>
<body>                  
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="foottable">
    <tbody>
        <tr valign="top">
            <td>
                <b>About</b>
                <a href="info.html">About</a>
                <a href="press.html">Press</a>
                <a target="_blank" href="http://blog.com/">Blog</a>
                <a href="events.html">Events</a>
                <a href="stores.html">Store Locations</a>
                <a href="ind.html">Site Map</a>
            </td>
            <td>
                <b>Customer Service</b>
                <a href="shipping.html">Shipping</a>
                <a href="returnpolicy.html">Returns</a>
                <a href="giftcert.html">Gift Certificates</a>
                <a href="privacypolicy.html">Privacy Policy</a>
                <a href="terms.html">Terms &amp; Conditions</a>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

As soon as the doctype is HTML 4.01 it does not work as expected

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
.foottable{
    width:100%;
    table-layout:fixed;
}
.foottable td{
    display: block;
    width: 100%;
}
</style>
</head>
<body>                  
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="foottable">
    <tbody>
        <tr valign="top">
            <td>
                <b>About</b>
                <a href="info.html">About</a>
                <a href="press.html">Press</a>
                <a target="_blank" href="http://blog.com/">Blog</a>
                <a href="events.html">Events</a>
                <a href="stores.html">Store Locations</a>
                <a href="ind.html">Site Map</a>
            </td>
            <td>
                <b>Customer Service</b>
                <a href="shipping.html">Shipping</a>
                <a href="returnpolicy.html">Returns</a>
                <a href="giftcert.html">Gift Certificates</a>
                <a href="privacypolicy.html">Privacy Policy</a>
                <a href="terms.html">Terms &amp; Conditions</a>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

This is what I expect to see: 在此输入图像描述

This is what I see: 在此输入图像描述

Anyone have any insight to why the doctype does not set the td on their own line? I am using Chrome. I checked firefox and it works as expected.

As noted above:

I did find the ability to enable the loose definition "w3.org/TR/html4/loose.dtd"; which solved the issue.

References

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM