Как сделать данную таблицы с помощью CSS?

189
21 июня 2022, 05:20

Как с помощью стилей оформить таблицу, особенно не понятно как сделать th послед. строку темнее в самом вверху, и цифры в самом верху намного больше чем текст, как это оформить? Использовать надо без классов, только псевдоклассы first-child, last-child, nth-child.?

Answer 1

Вот такой вариант

#select {
  max-width: 100%;
  border-radius: .5em;
  overflow: hidden;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  /* colors */
  --th-c1: #7887ab;
  --th-c2: #4f628e;
  --th-c3: #2e4172;
  --th-c4: #162955;
  --th-c5: #061539;
  --tr-o-o: #dbdbdb;
  --tr-o-e: #e7e7e7;
  --tr-e-o: #ececec;
  --tr-e-e: #f3f3f3;
}
#select tr > th,
#select tr > td {
  padding: .5em 1em;
  box-sizing: border-box;
}
/* tr th */
#select tr:nth-child(1) > th {
  color: #fff;
  text-align: center;
}
#select tr:nth-child(1) > th > span {
  display: block;
}
#select tr:nth-child(1) > th > span:nth-child(2) {
  font-size: 150%;
  margin-top: 1em;
}
#select tr:nth-child(1) > th:nth-child(1) {
  background-color: var(--th-c1);
}
#select tr:nth-child(1) > th:nth-child(2) {
  background-color: var(--th-c2);
}
#select tr:nth-child(1) > th:nth-child(3) {
  background-color: var(--th-c3);
}
#select tr:nth-child(1) > th:nth-child(4) {
  background-color: var(--th-c4);
}
#select tr:nth-child(1) > th:nth-child(5) {
  background-color: var(--th-c5);
}
/* tr td */
#select tr:not(:nth-child(1)) > td:not(:nth-child(1)) {
  text-align: center;
}
#select tr:nth-child(even) > td:nth-child(odd) {
  background-color: var(--tr-o-o);
}
#select tr:nth-child(even) > td:nth-child(even) {
  background-color: var(--tr-o-e);
}
#select tr:nth-child(odd) > td:nth-child(odd) {
  background-color: var(--tr-e-o);
}
#select tr:nth-child(odd) > td:nth-child(even) {
  background-color: var(--tr-e-e);
}
#select tr:nth-last-child(1) > td > a {
  display: inline-block;
  border: 1px solid #b7b7b7;
  background: #d3d3d3;
  color: #444;
  font-size: 80%;
  padding: .5em 1.5em;
  text-decoration: none !important;
  box-sizing: border-box;
}
<table id="select" cellspacing="0" cellpadding="0">
  <tr>
    <th>Choose your plan</th>
    <th>
      <span>started</span>
      <span>$10</span>
      <span>per month</span>
    </th>
    <th>
      <span>econom</span>
      <span>$30</span>
      <span>per month</span>
    </th>
    <th>
      <span>standart</span>
      <span>$59</span>
      <span>per month</span>
    </th>
    <th>
      <span>professional</span>
      <span>$99</span>
      <span>per month</span>
    </th>
  </tr>
  <tr>
    <td>Amount of space</td>
    <td>20GB</td>
    <td>40GB</td>
    <td>110GB</td>
    <td>Unlimited</td>
  </tr>
  <tr>
    <td>Bandwidth per month</td>
    <td>120GB</td>
    <td>240GB</td>
    <td>610GB</td>
    <td>1300GB</td>
  </tr>
  <tr>
    <td>Email accounts</td>
    <td>1</td>
    <td>15</td>
    <td>60</td>
    <td>Unlimited</td>
  </tr>
  <tr>
    <td>MySQL databases</td>
    <td>1</td>
    <td>15</td>
    <td>60</td>
    <td>Unlimited</td>
  </tr>
  <tr>
    <td>25h support</td>
    <td>No</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>Support tickets per month</td>
    <td>2</td>
    <td>6</td>
    <td>14</td>
    <td>20</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <a href="#">START</a>
    </td>
    <td>
      <a href="#">START</a>
    </td>
    <td>
      <a href="#">START</a>
    </td>
    <td>
      <a href="#">START</a>
    </td>
  </tr>
</table>

Answer 2

body {
  font-family: Helvetica;
}
table {
  width: 100%;
}
col:nth-child(odd) {
  background: #9994;
}
col:nth-child(even) {
  background: #ccc4;
}
tbody tr:nth-child(odd) {
  background: #9994;
}
tbody tr:nth-child(even) {
  background: #ccc4;
}
thead {
  color: #fff;
}
thead h3 {
  margin: 0;
}
thead p {
  margin: 0;
}
thead .price {
  font-size: 20pt;
  font-weight: bold;
}
thead .period {
  font-size: 12pt;
  font-weight: normal;
}
thead td:nth-child(1) {
  background: rgb(120, 135, 171);
}
thead td:nth-child(2) {
  background: rgb(79, 98, 142);
}
thead td:nth-child(3) {
  background: rgb(46, 65, 114);
}
thead td:nth-child(4) {
  background: rgb(22, 41, 85);
}
thead td:nth-child(5) {
  background: rgb(6, 21, 57);
}
td {
  text-align: center;
  vertical-align: middle;
}
tbody button {
  border-radius: 0;
  border: 1px solid #4448;
}
<table>
  <col>
  <col>
  <col>
  <col>
  <col>
  <thead>
    <tr>
      <td>Choose your plan</td>
      <td>
        <h3>starter</h3>
        <p class="price">$10</p>
        <p class="period">per month</p>
      </td>
      <td>
        <h3>econom</h3>
        <p class="price">$30</p>
        <p class="period">per month</p>
      </td>
      <td>
        <h3>standard</h3>
        <p class="price">$59</p>
        <p class="period">per month</p>
      </td>
      <td>
        <h3>professional</h3>
        <p class="price">$99</p>
        <p class="period">per month</p>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Function 1</td>
      <td>10</td>
      <td>20</td>
      <td>30</td>
      <td>40</td>
    </tr>
    <tr>
      <td>Function 2</td>
      <td>10</td>
      <td>20</td>
      <td>30</td>
      <td>40</td>
    </tr>
    <tr>
      <td>Function 3</td>
      <td>10</td>
      <td>20</td>
      <td>30</td>
      <td>40</td>
    </tr>
    <tr>
      <td>Function 4</td>
      <td>10</td>
      <td>20</td>
      <td>30</td>
      <td>40</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><button>START</button></td>
      <td><button>START</button></td>
      <td><button>START</button></td>
      <td><button>START</button></td>
    </tr>
  </tbody>
</table>
<!-- DivTable.com -->

READ ALSO
кастомный скролл для ie 11
HTML

кастомный скролл для ie 11

подскажите либу чтобы можно было сделать кастомный скролл для ie11, вид скроллбара снизу

 264
Размер body. Как это работает?
HTML

Размер body. Как это работает?

Я хочу сделать множественный фон (вода и рыба)Рыбе хочу задать определенное местоположение, например background-position: right center

 163
PyQt5 Печать HTML документов
HTML

PyQt5 Печать HTML документов

Друзья, кажется, я обыскал весь интернет, но так и не нашёл, какие сейчас есть способы печати HTML документов в PyQt5 ?

 270
При наведении курсора картинка меняется на карту
HTML

При наведении курсора картинка меняется на карту

Подскажите пожалуйста, как реализовать смену картинки на карту при наведении курсора? Наверное, это делается с помощью hover, возможно я не правНужно...

 240