具有叠加颜色的精美 css table 设计

Question

我从设计师那里得到了以下 table 设计，并被要求在 html/css 中实现它。

我尝试了以下实现，但现在我卡住了，觉得我运行方向错误。

我的方法是添加空 columns/rows 以分隔垂直框和没有覆盖框的区域。我现在面临的一些问题：

垂直框的起点应该比 table 的彩色行高一点，然后再向下一点结束。
我应该在右侧画线，然后从顶部延伸到左侧。
在 firefox 上，圆角与覆盖框结合使用时表现得很奇怪（见右图）。在 chrome 中，圆角看起来像预期的那样。

我试图从我的脚本中获取代码。这有点棘手，因为我使用 R 生成 table（不要问 ;)）。

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

Answer 1

您的 table 设计确实很棘手，但我想我设法让它工作了。

<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 中检查过。让我知道这对你有用。

具有叠加颜色的精美 css table 设计

Fancy css table design with overlaying colors

html

css

html-table

css-tables