100% width table cell_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-03 17:19 出处：网络

I have this table layout. I want to align the whole content to the right. So i\'m using one cell with width: 100%;. Usually everything looks good and nice.

I have this table layout. I want to align the whole content to the right. So i'm using one cell with width: 100%;. Usually everything looks good and nice.

But there is something, which i don't understand. If the content in cell, which has colspan, becomes bigger than normal cell in this column (you can test this by clicking Click to test button), it brakes whole layout.

This happens on Chrome, Safari 4 and 5, IE8, but on Opera, FF and IE7 is OK.

Any ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>TEST</title>
    <styl开发者_开发问答e type="text/css">
        table { width: 100%; }
        table td { border: 1px solid black; white-space: nowrap; }
        .delimiter { width: 100%; }
    </style>
    </head>
    <body>
        <table>
            <tr>
                <td><label>Row 1</label></td>
                <td>&nbsp;</td>
                <td><input type="text" value="Field 1" id="field1" size="25"></td>
                <td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;"></td>
                <td class="delimiter">&nbsp;</td>
            </tr>
            <tr>
                <td><label>Row 2</label></td>
                <td>&nbsp;</td>
                <td colspan="3"><input type="text" id="field2" value="Field 2" size="25"></td>
            </tr>
        </table>
    </body>
</html>

I was not surprised when you said it worked in some browsers and not others. Welcome to the real world of developing a web app. I haven't gone down into the nitty gritty of checking why browsers are refreshing their layouts differently, as i've learned that it can be a black hole of time. Instead i put forth the following solution:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<style type="text/css">
    table { width: 100%; }
    table td { border: 1px solid black; white-space: nowrap; }
    .delimiter { width: 100%; }
</style>
</head>
<body>
    <table>
        <tr>
            <td><label>Row 1</label></td>
            <td>&nbsp;</td>
            <td class="delimiter">
                <table><tr>
                    <td><input type="text" value="Field 1" id="field1" size="25" /></td>
                    <td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;" /></td>
                    <td class="delimiter">&nbsp;</td>
                </tr></table>
            </td>
        </tr>
        <tr>
            <td><label>Row 2</label></td>
            <td>&nbsp;</td>
            <td>
                <table><tr>
                    <td><input type="text" id="field2" value="Field 2" size="25" /></td>
                    <td class="delimiter">&nbsp;</td>
                </tr></table>
            </td>
        </tr>
    </table>
</body>
</html>

I know it's not the prettiest solution, but as raw html it does work. Tested in Chrome and IE10.

Use W3C standards to be more save with crossbrowser coding. Beste solution for javascript code crossbrowser safty is to user jQuery. It's even more handy for this kind of tools/functionalities.