HTML / CSS: Таблица, выходящая из ячейки. Это нормально? Как исправить?
У меня есть таблица внутри ячейки, и эта таблица «выходит» из ячейки, как показано на этом снимке экрана:
альтернативный текст 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>
@ BrianTompsett- 汤 莱恩 Перестал ли Skitch / Evernote обслуживать изображения с img.skitch.com? Мне было интересно, могло ли изображение быть перенесено в мою учетную запись Evernote, но, похоже, я тоже не нашел его там. Сообщите мне, есть ли у вас или у кого-то еще какие-либо предложения относительно того, как получить это изображение.
Ответы 7
непроверено: выньте поле «margin-left» и используйте вместо него «padding-left».
или же
Вы можете сделать отступ для значений ячеек без использования вложенной таблицы, добавив отступ слева к родительским таблицам 'td'.
Причина в том, что ширина вашей дочерней таблицы установлена на 100%, что означает, что она всегда будет полностью заполнять пространство, в котором находится. Кроме того, margin-left подталкивает ее к этому 100% порогу и за его пределами. что его завалили.
Это потому, что вы задаете ширину таблицы 100%. Он добавляет к этому запас, так что элемент имеет ширину> 100%. Если вы хотите обойти это, добавьте div или что-то еще над вложенной таблицей с полем: 3em, и вы можете оставить ширину таблицы равной 100%.
Обновлено: В ответ на комментарий Джобо к его ответу tds не поддерживают поля; однако вместо него должно работать padding-left: 3em.
Это не является атакой, а скорее поможет вам стать лучшим разработчиком:
- Есть необходимость в подтаблицах НИКОГДА.
- если вы собираетесь использовать CSS, сделайте это правильно, один или несколько внешних файлов.
- Это поможет вам развиваться как веб-разработчику - подумайте о том, как вы хотите структурировать страницу, а затем используйте правильную разметку для создания этой структуры - как только разметка станет действительной тогда, вы можете беспокоиться о стилизации.
-1 Извините, есть веские причины для вложенных таблиц, особенно с динамически генерируемым содержимым. В наши дни нечасто, но никогда? Ни за что.
Почему динамически генерируемый контент повлияет на потребность во вложенных конюшнях? Статический и динамический контент на стороне клиента одинаковы. Если вы размещаете таблицы внутри таблиц, очевидно, что структура вашей страницы плохая.
столы полезные, заткнись! -1
Внутренняя таблица должна быть такой же шириной, как и ее контейнер (width: 100%), а затем отодвинуться на 3 м от ее левого края: (margin-left: 3em)
Переключите самый внутренний TD на padding-left, который может помочь.
Но стандартный ответ здесь такой: «Боже, зачем ты делаешь вложенные таблицы, ты плохой, плохой человек !! 11»
Это происходит из-за того, что вы устанавливаете "margin-left: 3em", и он выталкивает подтаблицу наружу.
Попробуй это:
<!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 на padding-left в родительском TD (как сказал Jobo)
Просто удалите атрибут «ширина» этой таблицы, и вы увидите, что он останется в ячейке даже с длинным текстом.
Изображение теперь является мертвой ссылкой, что делает вопрос неясным.