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

Question

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

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

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

Answer 1

div высота = 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 элемента

Answer 2

Следующий код работает в IE 8, режиме совместимости IE 7 с 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. Это оказывается сложнее ...

Answer 3

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

tr имеет 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>

Answer 4

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

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

Answer 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();
    }
});

Answer 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>

Answer 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 a высота: 100%.Esto lo hace совместимый с FireFox и Chrome.Обозреватель Internet Explorer, объединяющий блок TD Como.De esta forma Explorer sí toma la altura maxima.

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

Answer 8

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

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

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

Answer 9

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

Answer 10

В конечном итоге я не нашел ничего, что могло бы работать во всех моих браузерах и во всех режимах рендеринга 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), FF42, Chrome44 +.Не тестируется с вложенными таблицами.