Ячейка таблицы со 100% шириной

У меня есть такая схема таблицы. Я хочу выровнять весь контент вправо. Поэтому я использую одну ячейку с width: 100%;. Обычно все выглядит хорошо и красиво.
Но есть кое-что, чего я не понимаю. Если содержимое в ячейке с colspan становится больше, чем обычная ячейка в этом столбце (вы можете проверить это, нажав Click to test button), это тормозит весь макет.
Это происходит в Chrome, Safari 4 и 5, IE8, но в Opera, FF и IE7 в порядке.

Любые идеи?

<!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><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>

html html-table cell
person Elvis    schedule 15.06.2010    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я не удивился, когда вы сказали, что в одних браузерах это работает, а в других нет. Добро пожаловать в реальный мир разработки веб-приложений. Я не стал вдаваться в подробности проверки того, почему браузеры обновляют свои макеты по-разному, поскольку я узнал, что это может быть черной дырой времени. Вместо этого я предложил следующее решение:

<!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>

Я знаю, что это не самое красивое решение, но как необработанный html он работает. Протестировано в Chrome и IE10.

person Sav    schedule 22.04.2013

arrow_upward
-2
arrow_downward

Используйте стандарты W3C, чтобы быть более экономным с кроссбраузерным кодированием. Лучшее решение для кроссбраузерной безопасности кода javascript — пользователь jQuery. Это еще более удобно для такого рода инструментов/функций.

person Digital Human    schedule 15.06.2010
comment
Ну, я не могу использовать jQuery, потому что тогда мне придется переписывать все приложение :) P.S. Что вы имеете в виду под «Использовать стандарты W3C»? - person Elvis; 15.06.2010
comment
jQuery, несмотря на то, что это очень популярная и широко применяемая библиотека, не является конечным пунктом внешнего интерфейса. Вполне допустимо отказаться от использования библиотеки. - person ryandlf; 02.02.2013