HTML и CSS Таблица

0

У меня есть таблица, как на картинке: Изображение 174551

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

  • 0
    Вы пробовали дать столу border-radius: 5px; border: 1px solid #000 ?
  • 0
    Тогда у него нет закругленных углов
Показать ещё 6 комментариев
Теги:
dom

3 ответа

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

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

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

Вот сообщение, подробно обсуждающее его.

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

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

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

Пожалуйста, взгляните на это сообщение

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

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

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

JSFIDDLE DEMO

Поделиться
  • 0
    Я бы не назвал нефиксированный радиус границы «будущим». Согласно caniuse.com/#search=border-radius, единственный оставшийся веб- набор - это iOS 3.2 и Android 2.1. Нет префикса -moz или konqueror.
  • 0
    @vals это просто копия и вставка из CSS-трюков. я думаю, что к тому времени, когда эта статья была написана, это было будущее.
0

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

table {
    background: lightblue;
    border-radius: 4px;
    border: 1px solid #000;
}
Поделиться
  • 0
    я думаю, что его вопрос также потребовал бы коллапса в клеточном пространстве на закругленных углах
0

Чтобы получить закругленные углы, вы можете использовать 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>
Поделиться

Ещё вопросы

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