CSS с таблицами, пустые строки без рамки - PullRequest
0 голосов
/ 16 мая 2011

Я использую Vaadin в своем проекте, в настоящее время у меня проблемы с ним.Это проблема CSS / HTML, и я не знаю, как я могу это исправить ...

Итак, ситуация выглядит так:

У меня есть структура HTML (CustomLayout), которая выглядит следующим образомчто:

<table> 
<tr>
    <td location="loc11"></td>
    <td location="loc12"></td>
</tr>
<tr>
    <td location="loc21"></td>
    <td location="loc22"></td>
</tr>
(...) 
</table> 

Я вставляю данные в td с помощью location = "xxx", данные в некоторых местах есть не у всех.CSS выглядит так:

table.metric_table_layout tr td {
 border-bottom: 1px dotted grey !important;
}

И вот в чем проблема:

the dots...

Если td пуст, у меня есть границы, которые полностью разрушили мой макет.Может кто-нибудь дать мне немного CSS (который будет работать и в IE 7+), чтобы это исправить?Я не хочу использовать JS, поэтому я не уверен, смогу ли я справиться с этим только с помощью CSS?

Thx tzim

Ответы [ 2 ]

2 голосов
/ 16 мая 2011

Попробуйте добавить:

table.metric_table_layout {
    border-collapse:separate;
    empty-cells:hide;
}

Но в IE8 должно быть определение !DOCTYPE.

1 голос
/ 16 мая 2011

Только с CSS вы можете использовать свойство empty-cells:hide. Это глючит во всех браузерах, так что делать некоторые предварительные просмотры во всех (отображается нормально в моем IE7 от IEtester - я просто должен был определить границу как #ccc вместо серого)

Образец: http://jsfiddle.net/EbvXQ/11/

...