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

Question

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

Answer 1

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 -->

Answer 2

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

#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>

БЛОГ НА HUSL

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

Ответы (2 шт):