HTML / CSS: таблица выходит из ячейки. Это нормально? Как исправить? - PullRequest
Новая
       31

HTML / CSS: таблица выходит из ячейки. Это нормально? Как исправить?

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

У меня есть таблица внутри ячейки, и эта таблица «выходит» из ячейки, как показано на этом скриншоте:

альтернативный текст http://img.skitch.com/20090120-pe4iykdqpymqaxr96tpubiqn7j.png

Я вижу это в Firefox. Это нормально". Как я могу это исправить?

код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <body>
        <table border="1">
            <tr>
                <td>
                    <table border="1" style="margin-left: 3em; width: 100%">
                        <tr>
                            <td>gaga</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

    </body>
</html>

Ответы [ 7 ]

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

Внутреннему столу говорят, что он такой же ширины, как его контейнер (width: 100%), а затем отодвинулся на 3Ems от его левого края: (margin-left: 3em)

Переключите внутреннюю TD на padding-left, что может помочь.

Но стандартный ответ здесь такой: "О, боже, зачем ты делаешь вложенные таблицы, плохой плохой человек !! 11"

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

Это происходит потому, что вы устанавливаете «margin-left: 3em», и это подталкивает вспомогательную таблицу наружу.

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

не проверено: уберите 'margin-left' и используйте вместо него 'padding-left'.

или

Вы можете сделать отступ для значений ваших ячеек, не используя вложенную таблицу, добавив отступ слева к родительским таблицам 'td'.

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

Просто удалите атрибут "width" этой таблицы, и вы увидите, что она останется внутри ячейки, даже с длинным текстом.

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

Попробуйте это: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <body>

        <table border="1">
            <tr>
                <td style="padding-left: 3em;">
                    <table border="1" style="width: 100%;">
                        <tr>
                            <td>gaga</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

        <table border="1">
            <tr>
                <td>
                    <table border="1" style="margin-left: 3em; width: 100%">
                        <tr>
                            <td>gaga</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

    </body>
</html>

Изменение поля margin-left с элемента TABLE на отступ слева в родительском TD (как указано Jobo )

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

Это не атака, а помощь, помогающая вам стать лучшим разработчиком:

  1. Существует НИКОГДА необходимость иметь подстолы.
  2. если вы собираетесь использовать CSS, сделайте это правильно, один или несколько внешних файлов.
  3. Это поможет вам развиваться как веб-разработчику - подумайте о том, как вы хотите структурировать страницу, а затем используйте правильную разметку для создания этой структуры - как только разметка действительна , тогда вы можете позаботиться о стилизации .
0 голосов
/ 20 января 2009

Это потому, что вы задаете ширину стола на 100%. К этому добавляется поле, чтобы элемент имел ширину> 100%. Если вы хотите обойти это, добавьте div или что-то над вложенной таблицей с полем: 3em, и вы можете оставить ширину таблицы равной 100%.

РЕДАКТИРОВАТЬ: В ответ на комментарий Джобо к его ответу, tds не поддерживает поля; однако, padding-left: 3em должен работать вместо этого.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...