Отрегулируйте высоту одного или нескольких <span> в ячейке таблицы

0

В этом примере можно установить autobit <span class="orange">ORANGE</span> чтобы установить наибольшую высоту строки? И с двумя или более <span> будет возможно разделить ячейку, чтобы отрегулировать высоту?

(Теперь используйте: display: table, table-row, table-cell, но также можете использовать классическую таблицу)

Изображение 174551

http://jsfiddle.net/EjqL8/

<html>
<head>
<style>
.table {
  display: table;
  background: #eee;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #000;
}

.cell span {
    display: block;
}

.cell span.red {
    background: red;
}
.cell span.yellow {
    background: yellow;
}
.cell span.green {
    background: green;
}
.cell span.orange {
    background: orange;
}
.cell span.grey {
    background: grey;
}

</style>
</head>
<body>
<div class="table">
    <div class="row">
        <div class="cell">Header</div>
        <div class="cell">Header</div>
        <div class="cell">Header</div>
        <div class="cell">Header</div>
    </div>
    <div class="row">
        <div class="cell">Row 1</div>
        <div class="cell">Row 1</div>
        <div class="cell">Row 1</div>
        <div class="cell">Row 1</div>
    </div>
    <div class="row">
        <div class="cell">
            <span class="red">RED</span>
            <span class="yellow">YELLOW</span>
            <span class="green">GREEN</span>
            <span class="orange">ORANGE</span>
            <span class="grey">GREY</span>
        </div>
        <div class="cell">Row 2</div>
        <div class="cell">Row 2</div>
        <div class="cell">
            <span class="orange">ORANGE</span>
        </div>
    </div>
 <div class="row">
        <div class="cell">
            <span class="red">RED</span>
            <span class="yellow">YELLOW</span>
            <span class="green">GREEN</span>
            <span class="orange">ORANGE</span>
            <span class="grey">GREY</span>
        </div>
        <div class="cell">Row 2</div>
        <div class="cell">Row 2</div>
        <div class="cell">
            <span class="green">GREEN</span>
            <span class="orange">ORANGE</span>
        </div>
    </div>  
</div>
</body>
</html>
Теги:
css-tables

5 ответов

1
Лучший ответ

Попробуйте следующее: http://jsfiddle.net/EjqL8/4/

$(document).ready(function(){
    $(".row .cell:last-child").has("span").each(function(){
        var counter = $(this).find("span").length;
        var height = $(this).height() / counter;                
        $(this).find("span").css('height', height+'px');        
    });
});
Поделиться
  • 0
    Если группа SPAN не является последней клеткой? jsfiddle.net/fekula/EjqL8/6
  • 1
    Затем замените: .cell:last-child на .cell ...?
Показать ещё 3 комментария
1

Используя jQuery, вы можете это сделать. Вам просто нужно использовать:

$('.toExpand').each(function(){
    var parentHeight = $(this).parent().height();
    $(this).height(parentHeight);    
});

чтобы расширить его до полной высоты родителя. Затем разделите переменную parentHeight чтобы настроить ее.

Вот код: http://jsfiddle.net/QtBlueWaffle/EjqL8/5/

Поделиться
  • 0
    @ У Лизы-Берлина есть лучшее решение, я думаю.
  • 0
    Решение @ Lisa-Berlin без лишних занятий
Показать ещё 1 комментарий
1

http://jsfiddle.net/EjqL8/2/

$(".row .cell:last-child").has("span").each(function(){
    var counter = 0;
    $(this).find("span").each(function(){
        counter += 1;
    });

    var height = 100 / counter;

    $(this).find("span").css('height', height+'%');        
});

Но вы должны установить высоты для своих клеток по крайней мере. Таким образом, jQuery будет вычислять высоту для ваших интервалов. Мы также можем рассчитать высоту ваших вызовов и настроить их для выполнения этой работы.

Поделиться
  • 0
    Но работает, только если промежуток находится в последней ячейке? Мне нужно любое место ... Например, jsfiddle.net/fekula/EjqL8/3
  • 0
    ммм ... @ Август, если я уберу: last-child будет работать с пролетами в любой ячейке?
Показать ещё 1 комментарий
0

Я создал FIDDLE, используя тег таблицы.

Вы можете просто использовать rowspan=n или colspan=n (n = количество столбцов), чтобы объединить столбцы.

Поделиться
  • 0
    Нет слияния, мне нужно охватить все клетки.
  • 0
    Либо вы делаете это с помощью тега span или table tag. Внешний вид остается прежним. В любом случае я предложил вам простой и легкий способ, который я знаю.
Показать ещё 2 комментария
0

Ну, я не хочу казаться грубым, но ты в основном заново изобретаешь колесо здесь.

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

Поделиться
  • 0
    Это было бы возможно с помощью JQuery?
  • 1
    Да, даже с jQuery ... нужно будет установить высоту по умолчанию, иначе проценты не могут быть использованы. Использование div и jQuery для переизобретения таблицы, кажется, далеко там. Я могу ошибаться, и раньше я ошибался, просто я не вижу необходимости в создании таблицы с DIV :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню