HTML и CSS Таблица

Question

У меня есть таблица, как на рисунке:

Можно ли добиться этого с чистой таблицы (tbody, th, td, tr, thead) CSS, любой пример? Как правило, у меня проблемы с закругленными углами с границей?

Answer 1

Да, это возможно. Но будут некоторые проблемы, связанные с префиксами браузера для некоторых приемов.

Существует много способов обойти его, причем лучше всего использовать процессор css (например: compass). или просто google закругленные углы, и вы найдете то, что ищете

Здесь post обсуждая его подробно.

так для закругленных углов это будет:

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; /* future proofing */ 
-khtml-border-radius: 10px; /* for old Konqueror browsers */ 

Что касается чередующиеся окраски вы можете использовать CSS3 psudo-селектор:

Пожалуйста принять смотреть на эту post

tr:nth-child(even) {background: #CCC} 
tr:nth-child(odd) {background: #FFF} 

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

.even-td {background: #CCC} 
.odd-td {background: #FFF} 

JSFIDDLE DEMO

Answer 2

Чтобы получить закругленные углы, которые можно использовать CSS, как (Вы всегда должны свернуть границу, прежде чем сделать его вокруг)

table { 
     border-collapse: separate; 
     border-spacing: 0; 
    } 
    table, td { 
     border: 1px solid black; 
     border-radius: 5px; 
     -moz-border-radius: 5px; 
     padding: 5px; 
    } 

И для разных цветов, которые вы можете сделать что-то вроде этого.

tr.d0 td { 
    background-color: #CC9999; color: black; 
} 
tr.d1 td { 
    background-color: #9999CC; color: black; 
} 

HTML:

<table> 
<tr class="d0"><td>One</td><td>one</td></tr> 
<tr class="d1"><td>Two</td><td>two</td></tr> 
</table> 

Answer 3

My fiddle, кажется, работает только с радиусом границы

table { 
    background: lightblue; 
    border-radius: 4px; 
    border: 1px solid #000; 
}