Как заставить ячейки таблицы иметь равную высоту

Как получить ячейки таблицы одинаковой высоты? Отъезд http://thomaswd.com/organizer/dashboard и нажмите на календарь. Вы увидите, что ячейки таблицы имеют разную высоту. У меня есть 2 строки в верхней части таблицы с фиксированной высотой, а высота моего стола - 100%. Я не хочу заданную высоту пикселя, потому что это не будет работать при изменении размера браузера. Как мне это сделать?Как заставить ячейки таблицы иметь равную высоту

источник

2013-03-13 Thomas Lai

вы можете использовать относительную высоту, а также, например, 10% – Horen

да, но верхние 2 строки имеют высоту пикселей –

Чтобы получить ячейки таблицы, чтобы иметь равную высоту я использовал Google Chrome и проверки в один из дней в календаре, щелкнув правой кнопкой мыши на день и выбрав «Осмотреть элемент». Тогда я изменил стилизации «календарного дня», как так:

/* shared */ 
td.calendar-day, td.calendar-day-np { 
    border-bottom:1px solid #999; 
    border-right:1px solid #999; 
    height: 10%; 
}

Просто укажите в style.css, что вы хотели бы, чтобы высота быть.

источник

2013-03-13 23:19:20

Что такое процент 'height: 10%;' out? Что, если у меня будет более десяти строк? – Flimm

Поскольку это ячейка таблицы, высота которой была бы не в высоте стола. –

От: How can I force all rows in a table to have the same height

<html> 
    <head> 
     <style type="text/css"> 
      #fixedheight { 
       table-layout: fixed; 
      } 

      #fixedheight td { 
       width: 25%; 
      } 

      #fixedheight td div { 
       height: 20px; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <table id="fixedheight"> 
      <tbody> 
      <tr> 
       <td><div>content</div></td> 
       <td><div>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</div></td> 
       <td><div>more content</div></td> 
       <td><div>small content</div></td> 
       <td><div>enough already</div></td> 
      </tr> 
      </tbody> 
     </table> 
    </body> 
</html>

источник

2013-03-13 22:47:34

Я не хочу фиксированную высоту –

Очевидно, адаптируйте скрипт к размерам ваших таблиц ... –

, а затем используйте процент вместо фиксированной высоты? от изменения размера таблицы, я бы добавил также минимальный размер и другой поток! –

Похоже, что вы хотите, чтобы высота самого высоких ячеек для распространения через ряд.

Вы можете сделать это с помощью JavaScript:

var eq_el_height = function(els, min_or_max) { 

    els.each(function() { 
     $(this).height('auto'); 
    }); 

    var m = $(els[0]).height(); 

    els.each(function() { 
     var h = $(this).height(); 

     if (min_or_max === "max") { 
      m = h > m ? h : m; 
     } else { 
      m = h < m ? h : m; 
     } 
    }); 

    els.each(function() { 
     $(this).height(m); 
    }); 
};

Передайте свои ячейки таблицы в функцию, как это:

 $(#fixedheight tr').each(function(){ 
      eq_el_height($(this).find('td'), "max"); 
     });

источник

2013-03-13 23:13:36 sanon

работает как шарм – mwallisch

спасибо, что спасли мой день! – SalutonMondo

Другим решением может быть:

var maxHeight = null; 
$('#tableId tr').each(function() { 
    var thisHeight = $(this).height(); 
    if(maxHeight == null || thisHeight > maxHeight) maxHeight = thisHeight; 
}).height(maxHeight);

источник

2017-05-02 14:26:38

Как заставить ячейки таблицы иметь равную высоту

ответ

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