Сделать DIV заполнять всю ячейку таблицы

Я видел этот вопрос и googled немного, но ничего подобного далеко работало. Сейчас я считаю это 2010 (эти вопросы/ответы старые и, ну, без ответа), и у нас есть CSS3! Есть ли способ получить div для заполнения всей ширины и высоты ячейки таблицы с помощью CSS?

Я не знаю, что ширина и/или высота ячейки будут превышать время, а установка ширины и высоты div на 100% не будет работать.

Кроме того, причиной, по которой мне нужен div, является то, что мне нужно полностью позиционировать некоторые элементы вне ячейки, а position: relative не относится к td s, поэтому мне нужна оболочка div.

ОТВЕТЫ

Ответ 1

Следующий код работает в IE 8, IE 8 режиме совместимости с IE 7 и Chrome (не протестирован в другом месте):

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

В своем первоначальном вопросе вы сказали, что установка width и height на 100% не работает, но это заставляет меня подозревать, что есть другое правило, переопределяющее его. Вы проверили вычисленный стиль в Chrome или Firebug, чтобы увидеть, действительно ли применяются правила ширины/высоты?

Изменить

Как я глуп! div определял размер текста, а не td. Вы можете исправить это в Chrome, сделав div display:inline-block, но он не работает в IE. Это оказалось более сложным...

Ответ 2

div height = 100% в ячейке таблицы будет работать только тогда, когда таблица имеет атрибут высоты.

<table border="1" style="height:300px; width: 100px;">
 <tr><td>cell1</td><td>cell2</td></tr>
 <tr>
   <td>
     <div style="height: 100%; width: 100%; background-color:pink;"></div>
   </td>
   <td>long text long text long text long text long text long text</td>
 </tr>
</table>

UPD в FireFox вы также должны установить значение height=100% для родительского элемента TD

Ответ 3

Мне пришлось установить поддельную высоту в <tr> и height: inherit для <td>s

tr имеет height: 1px (он все равно игнорируется)

Затем установите td height: inherit

Затем установите div в height: 100%

Это работало для меня в области IE и Chrome:

<table style="width:200px;">
        <tr style="height: 1px;">
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
              <div>
              Something big with multi lines and makes table bigger
              </div>
            </td>
            <td style="height: inherit; border: 1px solid #000; width: 100px;">
              <div style="background-color: red; height: 100%;">
              full-height div
              </div>
            </td>
        </tr>
    </table>

Ответ 4

Если ваша причина желания 100% -ного div внутри ячейки таблицы состояла в том, чтобы иметь цвет фона, простирающийся до полной высоты, но все же быть в состоянии иметь промежуток между ячейками, вы могли бы дать <td> себе цвет фона и использовать свойство border-spacing для создания поля между ячейками.

Если вам действительно нужен 100% -ный div высоты, однако, как упоминалось выше, вам нужно либо назначить фиксированную высоту для <table>, либо использовать Javascript.

Ответ 5

Так как каждый другой браузер (включая IE 7, 8 и 9) корректно обрабатывает position:relative в ячейке таблицы, и только Firefox ошибается, лучше всего использовать прокладку JavaScript. Вы не должны изменять свой DOM для одного неудавшегося браузера. Люди используют прокладки все время, когда IE получает что-то не так, и все остальные браузеры понимают это правильно.

Вот фрагмент со всем аннотированным кодом. JavaScript, HTML и CSS используют отзывчивые методы веб-дизайна в моем примере, но вам не нужно, если вы этого не хотите. (Отзывчивый означает, что он адаптируется к ширине вашего браузера.)

http://jsfiddle.net/mrbinky3000/MfWuV/33/

Вот сам код, но он не имеет смысла без контекста, поэтому перейдите по указанному выше URL-адресу jsfiddle. (Полный фрагмент также содержит много комментариев как в CSS, так и в Javascript.)

$(function() {
    // FireFox Shim
    if ($.browser.mozilla) {
        $('#test').wrapInner('<div class="ffpad"></div>');
        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;
            $ffpad.height(0);
            if ($parent.css('display') == 'table-cell') {               
                h = $parent.outerHeight();
                $ffpad.height(h);
            }
        }
        $(window).on('resize', function() {
            ffpad();
        });
        ffpad();
    }
});

Ответ 6

Я предлагаю решение, используя экспериментальный Flexbox для имитации макета таблицы, который позволит элементу содержимого ячейки заполнить родительскую ячейку по вертикали:

демонстрация

.table{ display:flex; border:2px solid red; }
.table > *{ flex: 1; border:2px solid blue; position:relative; }
.fill{ background:lightgreen; height:100%; position:absolute; left:0; right:0; }

/* Reset */
*{ padding:0; margin:0; }
body{ padding:10px; }
<div class='table'>
  <aside><div class='fill'>Green should be 100% height</div></aside>
  <aside></aside>
  <aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus conguet.</p>
  </aside>
</div>

Ответ 7

после нескольких дней поиска я выяснил возможное решение этой проблемы.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body style="height:100%">
<!-- for Firefox and Chrome compatibility set height:100% in the containing TABLE, the TR parent and the TD itself. -->
<table width="400" border="1" cellspacing="0" cellpadding="0" style="height:100%;">  
  <tr>
    <td>whatever</td>
    <td>whatever</td>
    <td>whatever</td>
  </tr>
  <tr style="height:100%;">
    <td>whatever dynamic height<br /><br /><br />more content
</td>
    <td>whatever</td>

    <!-- display,background-color and radius properties in TD BELOW could be placed in an <!--[if IE]> commentary If desired.
    This way TD would remain as display:table-cell; in FF and Chrome and would keep working correctly.    
    If you don't place the properties in IE commentary it will still work in FF and Chorme with a TD display:block;

    The Trick for IE is setting the cell to display:block; Setting radius is only an example of whay you may want a DIV 100%height inside a Cell.
    -->

    <td style="height:100%; width:100%; display:block; background-color:#3C3;border-radius: 0px 0px 1em 0px;">

    <div style="width:100%;height:100%;background-color:#3C3;-webkit-border-radius: 0px 0px 0.6em 0px;border-radius: 0px 0px 0.6em 0px;">
    Content inside DIV TAG
    </div>
     </td>
  </tr>
</table>
</body>
</html>

Испанский язык: El truco es establecer la Tabla, el TR y el TD высота: 100%. Совместимость с протоколом FireFox и Chrome. Internet Explorer ignora eso, por lo que ponemos la etiqueta TD como block. De esta forma Explorer sí toma la altura máxima.

Английское объяснение: в комментариях кода

Ответ 8

Хорошо, никто не упомянул об этом, поэтому я решил, что я опубликую этот трюк:

.tablecell {
    display:table-cell;
}
.tablecell div {
    width:100%;
    height:100%;
    overflow:auto;
}

переполнение: auto в этом контейнере div внутри ячейки делает трюк для меня. Без него div не использует всю высоту.

Ответ 9

Я думаю, что лучшим решением было бы использовать JavaScript.

Но я не уверен, что вам нужно сделать это, чтобы решить вашу проблему позиционирования элементов в <td> вне ячейки. Для этого вы можете сделать что-то вроде этого:

<div style="position:relative">
    <table>
        <tr>
            <td>
                <div style="position:absolute;bottom:-100px">hello world</div>
            </td>
        </tr>
    </table>
</div>

Не встроенный, но с классами и идентификаторами.

Ответ 10

Чтобы сделать высоту: 100% работа для внутреннего div, вам нужно установить высоту для родительского td. Для моего конкретного случая он работал с использованием высоты: 100%. Это сделало внутреннюю растяжку div, в то время как другие элементы таблицы не позволили td стать слишком большим. Конечно, вы можете использовать другие значения, чем 100%

Если вы хотите, чтобы ячейка таблицы имела фиксированную высоту, чтобы она не увеличивалась в зависимости от содержимого (чтобы сделать внутреннюю прокрутку div или скрыть переполнение), то есть когда у вас нет выбора, кроме некоторых трюков js, Для родительского td потребуется высота, указанная в не относительной единице (не%). И вам, скорее всего, не будет выбора, кроме как рассчитать эту высоту с помощью js. Для этого также потребуется таблица-макет: фиксированный стиль для элемента таблицы

Ответ 11

Я часто сталкиваюсь с подобными проблемами и всегда просто использую table-layout: fixed; в элементе table и height: 100%; на внутреннем div.

Ответ 12

В итоге я не нашел ничего, что могло бы работать во всех моих браузерах и всех режимах DocTypes/браузера, кроме использования jQuery. Итак, вот что я придумал. Он даже учитывает количество строк в строке.

function InitDivHeights() {
    var spacing = 10; // <-- Tune this value to match your tr/td spacing and padding.
    var rows = $('#MyTable tr');
    var heights = [];
    for (var i = 0; i < rows.length; i++)
        heights[i] = $(rows[i]).height();
    for (var i = 0; i < rows.length; i++) {
        var row = $(rows[i]);
        var cells = $('td', row);
        for (var j = 0; j < cells.length; j++) {
            var cell = $(cells[j]);
            var rowspan = cell.attr('rowspan') || 1;
            var newHeight = 0;
            for (var k = 0; (k < rowspan && i + k < heights.length); k++)
                newHeight += heights[i + k];
            $('div', cell).height(newHeight - spacing);
        }
    }
}
$(document).ready(InitDivHeights);

Протестировано в IE11 (Edge mode), FF42, Chrome44+. Не тестируется с вложенными таблицами.

Ответ 13

если <table> <tr> <td> <div> все имеют height: 100%; установите, тогда div будет заполнять динамическую высоту ячейки во всех браузерах.

Ответ 14

Если ячейка таблицы имеет нужный размер, просто добавьте этот класс CSS и назначьте его вашему div:

.block {
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100vh);
   width: 100%;
}

Если вы хотите, чтобы ячейка таблицы также заполняла родительский элемент, присвойте также класс ячейке таблицы. Я надеюсь, что это помогает.

Ответ 15

Вы можете сделать это так:

<td>
  <div style="width: 100%; position: relative; float: left;">inner div</div>
</td>

Ответ 16

немного опоздал на вечеринку, но вот мое решение:

<td style="padding: 0; position: relative;">
   <div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
     AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
     DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
   </div>
</td>

Ответ 17

Итак, поскольку все публикуют свое решение, и ни одно из них не подходит для меня, вот мое (проверено на Chrome и Firefox).

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }

Скрипка: https://jsfiddle.net/nh6g5fzv/

Ответ 18

Я не уверен, что вы хотите сделать, но вы можете попробовать следующее:

<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>

Ответ 19

Следующее должно работать. Вы должны установить высоту родительской ячейки. https://jsfiddle.net/nrvd3vgd/

<table style="width:200px; border: 1px solid #000;">
    <tr>
        <td style="height:100px;"></td>
    </tr>
    <tr>
        <td style="height:200px;">
            <div style="height:100%; background: #f00;"></div>
        </td>
    </tr>
</table>

Ответ 20

Попробуйте следующее:

<td style="position:relative;">
    <div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>

Ответ 21

Попробуйте добавить отображение: блок таблицы внутри ячейки

Ответ 22

Я не смотрю здесь старый CSS-трюк для < div > внутри < td >. Поэтому я напоминаю: просто установите некоторое минимальное значение для ширины, но то, что вам нужно для минимальной ширины. Например:

<div style="width: 3px; min-width: 99%;">

Ширина ТД, в этом случае, зависит от вас.

Ответ 23

Это мое решение для увеличения 100% высоты и 100% ширины в html <td>

если вы удалите первую строку в своем коде, вы можете ее исправить...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

потому что этот doctype не позволяет в некоторых файлах использовать 100% процентов внутри <td>, но если вы удалите эту строку, тело не сможет развернуть фон до 100% высоты и 100% ширины, поэтому я нашел это DOCTYPE, который решает проблему

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

этот DOCTYPE позволяет вам распространять фон в вашем теле как высоту 100% и ширину 100%, и позволить вам взять 100% высоту и 100% ширину в <td>