Как сделать так, чтобы таблица отображалась в произвольном формате с использованием CSS? - PullRequest
Новая
       28

Как сделать так, чтобы таблица отображалась в произвольном формате с использованием CSS?

0 голосов
/ 23 октября 2011

enter image description here

Я пытаюсь создать таблицу, которая автоматически генерируется RAILS в формате по умолчанию, чтобы он выглядел так, как я хочу, используя CSS.

Т.е. если вы посмотрели на изображение, я хочу, чтобы третий столбец отображался в виде строки.Возможно ли это через CSS?

Ответы [ 2 ]

2 голосов
/ 23 октября 2011

Используя JavaScript, рестайлинг вашей таблицы довольно прост. Давайте предположим, что ваша таблица называется your-table. Выберите свою таблицу, переместите последнюю ячейку во вновь созданную строку и вставьте строку после текущей строки.

Поскольку вы добавляете строки в таблицу, убедитесь, что вы начинаете с конца таблицы. Если вы используете for(var i=0; i<rows.length; i++), ваша страница попадет в бесконечный цикл.

Скрипка: http://jsfiddle.net/QP8ga/

function refactorTable(table){
    var rows = table.rows;
    for(var i=rows.length-1; i>=0; i--){
        var tr = document.createElement("tr");
        var td = rows[i].cells[2];
        td.colSpan = "2";
        tr.appendChild(td);
        rows[i].parentNode.insertBefore(tr, rows[i].nextSibling)
    }
}
window.onload = function(){
    var table_IDs = ["your-table", "another-table"];
    for(var i=0; i<table_IDs.length; i++) refactorTable(table_IDs[i]);
}

Предыдущий код изменен для поддержки нескольких таблиц. Скрипка показывает основной пример с одной таблицей.

1 голос
/ 23 октября 2011

В качестве академического упражнения, здесь чисто CSS-решение.К сожалению, он будет работать только в браузерах, которые должным образом поддерживают современный CSS.Нет поддержки IE. 

th { 
    display:none; 
}

table, tbody, tr, td { 
    display:block; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
    border : 0px solid black;
}

table { 
    border-width : 1px 1px 0px; 
}

td:nth-child(1) { 
    width :50%; 
    float:left; 
}

td:nth-child(2) { 
    width :50%; 
    float:left; 
    border-left-width: 1px;
}

td:nth-child(3) { 
    clear:both; 
    border-width: 1px 0px; 
}

См. http://jsfiddle.net/FjBdL/5/

...