Закругленные границы стола

В настоящее время я использую закругленные границы на столе следующим образом:

.tbor {
    border-width:3px;
    border-style:solid;
    border-color:lighten(@col-border,10%) darken(@col-border,10%) darken(@col-border,10%) lighten(@col-border,10%);
    border-radius:12px;
}
.tbor>tr>td, .tbor>thead>tr>td, .tbor>tbody>tr>td, .tbor>tfoot>tr>td, .tbor>tr>th, .tbor>thead>tr>th, .tbor>tbody>tr>th, .tbor>tfoot>tr>th {
    border: 1px solid @col-border;
    padding: 2px;
}
.tbor_tl {border-top-left-radius: 8px;}
.tbor_tr {border-top-right-radius: 8px;}
.tbor_br {border-bottom-right-radius: 8px;}
.tbor_bl {border-bottom-left-radius: 8px;}

Это работает нормально, но требует, чтобы я вручную установил классы в верхней левой, верхней правой, нижней левой и нижней правой ячейках.

В другом проекте я использовал следующие правила для ячеек:

.tbor>thead>tr:first-of-type>td:first-of-type,.tbor>colgroup+tbody>tr:first-of-type>td:first-of-type,.tbor>tbody:first-child>tr:first-of-type>td:first-of-type,.tbor>tr:first-of-type>td:first-of-type{border-top-left-radius:8px}
.tbor>thead>tr:first-of-type>td:last-of-type,.tbor>colgroup+tbody>tr:first-of-type>td:last-of-type,.tbor>tbody:first-child>tr:first-of-type>td:last-of-type,.tbor>tr:first-of-type>td:last-of-type{border-top-right-radius:8px}
.tbor>tbody:last-child>tr:last-of-type>td:first-of-type,.tbor>tfoot>tr:last-of-type>td:first-of-type,.tbor>tr:last-of-type>td:first-of-type{border-bottom-left-radius:8px}
.tbor>tbody:last-child>tr:last-of-type>td:last-of-type,.tbor>tfoot>tr:last-of-type>td:last-of-type,.tbor>tr:last-of-type>td:last-of-type{border-bottom-right-radius:8px}

Это ужасный беспорядок, и он полностью полагается на то, что все ячейки таблицы имеют размер 1x1. Он полностью разваливается, когда какая-либо из ячеек (особенно нижних) имеет colspan или rowspan.

Есть какой-либо способ сделать это? JavaScript в порядке: можно предположить, что вся таблица статическая или что у динамических таблиц есть статические первая и последняя строки.


css css-tables
person Niet the Dark Absol    schedule 19.05.2013    source источник
comment
Я новичок в этом, но почему бы не border-radius:1px 1px 1px 1px вместо того, чтобы сказать, верхний левый, нижний правый, нижний левый ....?   -  person samayo    schedule 20.05.2013
comment
Потому что я устанавливаю только один угол за раз?   -  person Niet the Dark Absol    schedule 20.05.2013
comment
Эти столы большие? Таблицы с более чем несколькими тысячами строк загружаются медленно. Рассматривали ли вы использование промежутков вместо ячеек таблицы? Можете ли вы предоставить небольшую скрипку наихудшего сценария, с которой мы можем немного поиграть?   -  person Travis J    schedule 20.05.2013
comment
@TravisJ Я не понимаю, чем тысяча интервалов лучше тысячи ячеек таблицы. В любом случае, самая большая таблица будет размером примерно 5x100 ячеек.   -  person Niet the Dark Absol    schedule 20.05.2013
comment
@Kolink - это связано с тем, что ширина столбцов пересчитывается при рендеринге каждой строки. По мере того, как количество строк увеличивается, повторный расчет / повторный рендеринг каждой предыдущей строки начинает немного сказываться на браузере (25000 строк вызовут значительную задержку, по крайней мере, от 10 до 20 секунд). У каждого диапазона уже были бы предопределены его стиль, ширина и т. Д., И для этого не потребовались бы эти дополнительные вычисления и повторный рендеринг. Ячейки 5x100 не будут иметь заметной (или какой-либо реальной) разницы во времени рендеринга, поэтому tds будет в порядке.   -  person Travis J    schedule 20.05.2013
comment
@Kolink - Думаю, я все еще пытаюсь представить, чего вы хотите достичь. Я сделал эту скрипку: jsfiddle.net/cuRwF, не могли бы вы объяснить, что в нем следует изменить или как он отличается от текущего выпуска, который вы рассматриваете?   -  person Travis J    schedule 20.05.2013
comment
Я часто использую table-layout:fixed и colgroup, особенно на больших столах.   -  person Niet the Dark Absol    schedule 20.05.2013
comment
@TravisJ Вот пример желаемого результата.   -  person Niet the Dark Absol    schedule 20.05.2013

Ответы (1)


arrow_upward
0
arrow_downward

jsFiddle Demo

Вроде интересная ситуация. На самом деле нетривиальная часть заключается в идентификации ячейки таблицы в правом нижнем углу таблицы. Остальные можно найти обычными способами.

Я не уверен, что это чище, чем ваш подход. Кроме того, я использовал jQuery (извините) из-за его offset функций. Эту функцию легко использовать, если вы не включили jQuery в свой код, но для этого примера и для небольшой краткости я использовал ее.

При таком подходе четыре угла будут отсортированы по их минимальному / максимальному положению сверху и слева по отношению к странице.

(function (){
var tl = {};tl.x=99999;tl.y=99999;
var tr = {};tr.x=0;tr.y=99999;
var bl = {};bl.x=99999;bl.y=0;
var br = {};br.x=0;br.y=0;
$(".tbor td").each(function(){
    var cur = $(this).offset();
    if( cur.top <= tl.y && cur.left <= tl.x ){
     tl.x = cur.left;
     tl.y = cur.top;
     tl.td = this;
    }
    if( cur.top <= tr.y && cur.left >= tr.x ){
     tr.x = cur.left;
     tr.y = cur.top;
     tr.td = this;
    }
    if( cur.top >= bl.y && cur.left <= bl.x ){
     bl.x = cur.left;
     bl.y = cur.top;
     bl.td = this;
    }
    if( cur.top >= br.y && cur.left >= br.x ){
     br.x = cur.left;
     br.y = cur.top;
     br.td = this;
    }
});
tl.td.className += " tbor_tl";
tr.td.className += " tbor_tr";
bl.td.className += " tbor_bl";
br.td.className += " tbor_br";
})()

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

person Travis J    schedule 19.05.2013