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

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



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



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

885   19  
css

19 ответов:

следующий код работает на 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, чтобы увидеть, действительно ли применяются правила ширины/высоты?

Edit

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

44  
2014-02-18 07:35:42

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 элемент

46  
2015-12-23 16:17:27

Я должен поставил подделка высота <tr> и высоты: наследования на <td>s

тр height: 1px (это игнорируется в любом случае)

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

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

это работало для меня в IE edge и 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>
19  
2016-01-14 05:27:34

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

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

15  
2013-01-04 20:51:12

Так как каждый другой браузер (включая 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  
2014-09-24 17:33:03

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

 <!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 a высота: 100%. Esto lo hace совместимый con FireFox y Chrome. Интернет Эксплорер игнора Эсо, пор Ло ке ponemos Ла представлена ООО " ТД " Комо блока. De esta forma Explorer sí toma la altura máxima.

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

3  
2013-06-19 15:00:55

Я предлагаю решение, с помощью экспериментальные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>
3  
2018-02-05 14:22:18

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

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

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

2  
2016-12-08 20:15:02

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

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

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

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

1  
2010-07-09 22:01:02

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

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

0  
2014-02-13 14:07:26

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

0  
2014-11-26 00:17:48

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

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), FF42, Chrome44+. Не тестируется с вложенными таблицами.

0  
2015-12-03 16:08:00

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

0  
2018-04-12 16:18:28

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

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

на td'ширина s, в этом случае, зависит от вас.

0  
2018-05-02 17:49:37

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

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

-1  
2014-11-26 11:51:15

следующее должно работать. Вы должны установить высоту родительской ячейки. 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>
-1  
2015-04-21 16:27:30

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

<td style="position:relative;">
    <div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>
-1  
2016-08-16 21:38:49

Попробуйте поместить display: table block внутри ячейки

-2  
2016-05-31 19:32:47

это мое решение для расширения 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>

-6  
2012-11-22 12:22:32

Comments

    Ничего не найдено.
Click here to cancel reply.