Ячейка таблицы шириной 100% - PullRequest
Новая
       3

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

2 голосов
/ 15 июня 2010

У меня есть этот макет таблицы.Я хочу выровнять весь контент вправо.Поэтому я использую одну клетку с 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>

Ответы [ 2 ]

0 голосов
/ 22 апреля 2013

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

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

0 голосов
/ 15 июня 2010

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

...