Почему <td>уменьшается, когда я устанавливаю дочерний элемент в «width: 80%»? - PullRequest
Новая
       13

Почему <td>уменьшается, когда я устанавливаю дочерний элемент в «width: 80%»?

1 голос
/ 20 января 2009

У меня есть таблица, где один из левых столбцов уменьшается, когда я устанавливаю стиль вложенного элемента на width: 80% . Столбец сжимается и усекает входные элементы правого края. Вы можете понять, о чем я говорю, удалив стиль из элемента ввода. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
    <table width="100%" border="1">
        <tr>
            <td>
                <input type="text" style="width: 80%;" />
            </td>
            <td>
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
            </td>
        </tr>
    </table>
</body>
</html>

У меня такое ощущение, что размер столбцов основан на дочерних элементах, но, определяя размер элемента на основе его родителя, я создал 'catch 22'.

Может кто-нибудь объяснить мне, что происходит, и как я могу поддерживать ту же ширину столбца и увеличить размер моего элемента до 80% от его ширины?

Ответы [ 2 ]

7 голосов
/ 20 января 2009

Проблема, с которой вы столкнулись, заключается в том, что вы устанавливаете ширину <input> в процентах от ячейки без ширины. Таким образом, ячейка становится меньше, чтобы компенсировать текст в другой ячейке, и после того, как это сделано, ввод получает 80% от всего, что осталось.

Ваши варианты:
1) Установите ширину в пикселях для поля <input>.
2) Установите ширину в пикселях / процентах для <td>.

адрес вашего комментария: Когда вы удаляете стиль, причина его увеличения заключается в том, что он возвращается к стандартному размеру браузера для <input> элементов, что больше 80% от всего оставил в камере.

1 голос
/ 20 января 2009

Вы можете указать явную ширину для первого столбца: 

<table width="100%" border="1">
    <tr>
            <td width="20%">
                    <input type="text" style="width: 80%;" />
            </td>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...