Необычный дизайн стола css с наложением цветов - PullRequest
Новая
       56

Необычный дизайн стола css с наложением цветов

0 голосов
/ 22 ноября 2018

Я получил следующий дизайн таблицы от дизайнера, и меня попросили реализовать его в формате html / css.

Design

Я попробовал и получилследующая реализация, но теперь я застрял и чувствую, что бежал не в том направлении.

My current implementation

Мой подход заключался в добавлении пустых столбцов / строк вразделите вертикальные блоки и области, в которых нет оверлейных блоков.Некоторые проблемы, с которыми я сейчас сталкиваюсь:

  1. Вертикальные блоки должны начинаться немного выше, чем цветные строки таблицы, и заканчиваться немного ниже.
  2. Я должен нарисоватьлинии на правой стороне, которые продолжаются, затем сверху налево.
  3. На Firefox закругленные углы ведут себя странно в сочетании с оверлейным блоком (см. справа).В хроме закругленные углы выглядят как и ожидалось.

Я пытался извлечь код из моих скриптов.Это немного сложно, так как я генерирую таблицу, используя R (не спрашивай;)). 

::after,
 ::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

::selection {
  background: #eee;
}

::selection {
  background: #eee;
}

element {}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  line-height: 1.4;
  color: #222222;
  font-family: MaisonNeue;
  font-size: 14px;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

html {
  font-size: 10px;
}

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
}

.vanilla {
  font-size: 12px;
  width: 90%;
  border-collapse: collapse;
  text-align: center;
  border-spacing: 0 5px;
  background-size: 100% 50%;
}

.vanilla th {
  text-align: center;
  background: #ffffff;
  color: #000000;
}

.vanilla td {
  padding: 5px 0;
  border-bottom: 5px solid white;
}

.vanilla tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}

.vanilla tr:first-child td:first-child {
  border-top-left-radius: 10px;
  text-align: left;
  padding-left: 7px;
  border-bottom-left-radius: 10px;
}

.vanilla tr:first-child td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.vanilla tr:nth-child(2) td:first-child {
  text-align: left;
  padding-left: 7px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.vanilla tr:nth-child(2) td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.vanilla tr:nth-child(3) td:first-child {
  text-align: left;
  padding-left: 7px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.vanilla tr:nth-child(3) td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.vanilla tr:nth-child(4) td:first-child {
  text-align: left;
  padding-left: 7px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.vanilla tr:nth-child(4) td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.vanilla tr:nth-child(5) td:first-child {
  text-align: left;
  padding-left: 7px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.vanilla tr:nth-child(5) td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.vanilla tr:nth-child(6) td:first-child {
  text-align: left;
  padding-left: 7px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.vanilla tr:nth-child(6) td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.vanilla td:nth-child(3),
td:nth-child(5),
td:nth-child(7),
td:nth-child(9) {
  background: rgba(236, 236, 236, 0.95);
  text-align: center;
  padding-left: 7px;
  width: 180px;
  color: black;
}

.vanilla td:nth-child(2),
td:nth-child(4),
td:nth-child(6),
td:nth-child(8) {
  padding-left: 10px;
}

.vanilla tr:first-child {
  font-weight: bold;
  font-style: arial;
  font-size: 17px;
  color: #ffffff;
  background-color: RGB(181, 194, 198);
}

.vanilla tr:nth-child(2) {
  font-weight: bold;
  font-style: arial;
  font-size: 17px;
  color: white;
  background-color: RGB(65, 143, 126);
}

.vanilla tr:nth-child(3) {
  background-color: RGB(146, 206, 193);
  color: white;
  font-weight: bold;
  font-style: Times new roman;
  font-size: 17px;
}

.vanilla tr:nth-child(4) {
  background-color: RGB(15, 74, 96);
  color: white;
  font-weight: bold;
  font-style: arial;
  font-size: 17px;
  padding-left: 10px;
}

.vanilla tr:nth-child(5) {
  background-color: RGB(74, 123, 143);
  color: white;
  font-weight: bold;
  font-style: arial;
  font-size: 17px;
  padding-left: 10px;
}

.vanilla tr:nth-child(6) {
  background-color: RGB(56, 56, 54);
  color: white;
  font-weight: bold;
  font-style: arial;
  font-size: 17px;
  padding-left: 10px;
}

.delta_value {
  /*width: 30px;*/
  display: inline-block;
}

.delta {
  font-weight: bold;
  font-size: 17px;
  width: 25px;
  color: #69A252;
  height: 25px;
  border-radius: 15px;
  vertical-align: middle;
  /*padding-top: 5px;*/
  margin-left: 4px;
  /*padding-left: 8px;*/
}

.delta_base {
  text-align: left;
  color: #000000;
}
<div>
  <div id="tacos_1_1-taco" class="shiny-html-output shiny-bound-output">
    <table class="vanilla">
      <thead>
        <tr>
          <th><span> </span></th>
          <th><span></span></th>
          <th><span>2015</span></th>
          <th><span></span></th>
          <th><span>2016</span></th>
          <th><span></span></th>
          <th><span>2017</span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span>XXX</span></td>
          <td><span></span></td>
          <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXXX</span><span style="width:60px;float:right;margin-right:3px;color:white" class="delta"></span></div>
  </span>
  </td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXX</span><span style="width:60px;float:right;margin-right:3px;color:green" class="delta">(+0%)</span></div>
</span>
</td>
<td><span></span></td>
<td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXXX</span><span style="width:60px;float:right;margin-right:3px;color:black" class="delta">(0%)</span></div>
  </span>
</td>
</tr>
<tr>
  <td><span>XXXX</span></td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXX</span><span style="width:60px;float:right;margin-right:3px;color:white" class="delta"></span></div>
    </span>
  </td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXX</span><span style="width:60px;float:right;margin-right:3px;color:green" class="delta">(+0%)</span></div>
    </span>
  </td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXX</span><span style="width:60px;float:right;margin-right:3px;color:green" class="delta">(+0%)</span></div>
    </span>
  </td>
</tr>
<tr>
  <td><span>XXXX</span></td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXX</span><span style="width:60px;float:right;margin-right:3px;color:white" class="delta"></span></div>
    </span>
  </td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXX</span><span style="width:60px;float:right;margin-right:3px;color:green" class="delta">(+0%)</span></div>
    </span>
  </td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXX</span><span style="width:60px;float:right;margin-right:3px;color:green" class="delta">(0%)</span></div>
    </span>
  </td>
</tr>
<tr>
  <td><span>XXXX</span></td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">  0 %</span><span style="width:60px;float:right;margin-right:3px;color:white" class="delta"></span></div>
    </span>
  </td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">   0 %</span><span style="width:60px;float:right;margin-right:3px;color:green" class="delta">(+0%)</span></div>
    </span>
  </td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">   0 %</span><span style="width:60px;float:right;margin-right:3px;color:red" class="delta">(0%)</span></div>
    </span>
  </td>
</tr>
</tbody>
</table>
</div>
</div>

1 Ответ

0 голосов
/ 22 ноября 2018

Ваш дизайн таблицы действительно сложный, но я думаю, что мне удалось заставить его работать. 

<table cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <td></td>
      <td>2018</td>
      <td>2017</td>
      <td>2016</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>XXX</th>
      <td>0 XXX <span class="details">(+50)</span></td>
      <td>0 XXX </td>
      <td>0 XXX </td>
    </tr>
    <tr>
      <th>XXX</th>
      <td>0 XXX <span class="details">(+50)</span></td>
      <td>0 XXX </td>
      <td>0 XXX </td>
    </tr>
    <tr>
      <th>XXX</th>
      <td>0 XXX <span class="details">(+50)</span></td>
      <td>0 XXX </td>
      <td>0 XXX </td>
    </tr>
  </tbody>
  <!-- each "group" of rows is its own tbody -->
  <tbody class="blue">
    <tr>
      <th>XXX</th>
      <td>0 XXX <span class="details">(+50)</span></td>
      <td>0 XXX </td>
      <td>0 XXX </td>
    </tr>
    <tr>
      <th>XXX</th>
      <td>0 XXX <span class="details">(+50)</span></td>
      <td>0 XXX </td>
      <td>0 XXX </td>
    </tr>
  </tbody>
</table>

И вот у вас есть CSS (я написал SCSS в коде пера, это скомпилированный результат)

table thead th, table thead td {
  padding: 5px 10px;
  font-weight: bold;
}
table tbody td, table tbody th {
  color: #fff;
  position: relative;
  padding: 10px 25px;
}
table tbody td:before, table tbody th:before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  bottom: 5px;
  background: green;
  z-index: -2;
}
table tbody.blue th:before, table tbody.blue td:before {
  background: blue;
}
table tbody td {
  color: #000;
}
table tbody td:after {
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  bottom: 0px;
  background: rgba(200, 200, 200, 0.9);
  z-index: -1;
}
table tbody th:before {
  border-radius: 5px 0 0 5px;
  left: 5px;
}
table tbody td:last-child:before {
  border-radius: 0 5px 5px 0;
}
table tbody th:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  bottom: 0;
  border-left: 1px solid red;
}
table tbody tr:first-child th:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  border-top: 1px solid red;
}
table tbody tr:last-child th:after {
  bottom: 5px;
}

.details {
  color: green;
}

А вот кодовое перо: https://codepen.io/anon/pen/dQmymP

(Пожалуйста, не обращайте внимания на внешний вид, у меня не было времени, чтобы оформить его с правильными цветами, интервалом и шрифтом)

Я проверил это в Chrome, Firefox и Edge.Дайте мне знать, что это работает для вас.

...