Связь между таблицей и родительским div

-1

Итак, у меня есть таблица внутри div, и я не указал никакой ширины. Для таблиц с большим количеством содержимого ширина таблицы превышает ширину родительского div. Почему это происходит? Как это сделать так, чтобы ширина таблицы всегда составляла некоторый процент от родительского div?Связь между таблицей и родительским div

источник

2013-07-10 praks5432

Является ли ваш div объявленным как поплавок? – Mik378

Предлагаю дать больше информации о том, что вы уже пробовали, и, например, очерках того, что вы пытаетесь выполнить. – Sikian

Возможно, вы задаетесь непонятным вопросом, и чем больше информации вы сможете предоставить, тем лучше ответы, которые вы получите. –

Установите процентную ширину для таблицы и убедитесь, что ваш CSS не объявил ширину для div в другом месте. Дважды проверьте свой HTML, чтобы убедиться, что вы правильно вложили таблицу и закрыли свой тег div. Что-то вроде этого:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Whatever</title> 
    </head> 
    <body> 
    <div> 
     <table><!--all your table stuffs--></table> 
    </div> 
    </body> 
</html>

CSS:

div{ 
    width: 90%; 
} 

table { 
    width: 90%; 
}

Классы лучший способ решения этой проблемы, но приведенный выше код будет убедиться, что ваш ДИВ составляет 90% от ширины страницы, и таблица 90% вашей ширины div (с учетом полей, отступов и т. Д.).

источник

2013-07-10 23:08:01 mikedugan

Это то, что я хотел. Спасибо – praks5432

Вышеприведенный код не будет работать, если содержимое содержащихся элементов не сломается (например, длинные строки смежного текста, большие изображения и т. Д.). Вам нужно установить 'table-layout', который по умолчанию является' auto'. – nathanchere

CSS - ваш друг.

<table style="table-layout:fixed">

Это гарантирует, что элемент таблицы имеет последнее слово в ширине, а не в содержании.

обязательное ложка вскармливания пример:

<style> 
#sampleTable { 
    table-layout:fixed; 
    width:80%; 

    background-color:#99F; 
} 

#container { 
    width:500px; 

    background-color:#F99; 
} 
</style> 

<div id="container"> 
    <table id="sampleTable"> 
     <tr><td>Exampleofreallylongtextwhichshouldbreaklayoutnormally</td></tr> 
    </table> 
</div>

В этом примере таблица всегда должна быть 400 пикселей (80% 500px родителя). Типичные предостережения для заполнения, полей и т. Д. Все еще применяются.

Вы также можете рассмотреть word-wrap и overflow для определения того, что делать с контентом, который обычно вытесняет размер таблицы.

источник

2013-07-10 23:08:11 nathanchere

и встроенный CSS - ваш враг;) – mikedugan

Это быстрый пример для быстрого вопроса. – nathanchere

Просто указывая на OP, не пытаясь нагнать вас – mikedugan

Связь между таблицей и родительским div

ответ

Смежные вопросы