Fancy css table design with overlaying colors












0















I got the following table design from a designer and was asked to implement it in html/css.



Design



I tried around and got to the following implementation, but now I am stuck and feel I was running in the wrong direction.



My current implementation



My approach was to add empty columns/rows to separate between the vertical boxes and the areas that don't have the overlay boxes.
Some problems I am now facing:




  1. The vertical boxes should start a bit higher then the colored rows of the table and end a bit further down.

  2. I am supposed to draw the lines on the right side that extend then on top to the left.

  3. On firefox the rounded corners behave strange in combination with the overlay box (see on the right). In chrome the rounded corners look like expected.


I tried to get the code out of my scripts. It is a bit tricky since I generate the table using R (don't ask ;)).






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








html css html-table css-tables







share|improve this question

























  • Please supply your code so I can amend it :)

    – Daniel Vickers
    Nov 22 '18 at 9:22











  • throw some table html in some where and then I'll have a play with it. Like codepen.io/#

    – Carol McKay
    Nov 22 '18 at 9:22











  • :) ok, I am generating the html in r, but I will try to copy it and add the relevant css.

    – Trollbrot
    Nov 22 '18 at 9:25











  • Imo try to implement this work with div not table. Based on what the artworks tell me it's easier to do the job with divs rather table.

    – Colin Cline
    Nov 22 '18 at 9:55






  • 1





    Tell the designer that table elements in HTML have alot of layout restrictions (which he probably should know about since it's his job to design for HTML).

    – connexo
    Nov 22 '18 at 10:16


















0















I got the following table design from a designer and was asked to implement it in html/css.



Design



I tried around and got to the following implementation, but now I am stuck and feel I was running in the wrong direction.



My current implementation



My approach was to add empty columns/rows to separate between the vertical boxes and the areas that don't have the overlay boxes.
Some problems I am now facing:




  1. The vertical boxes should start a bit higher then the colored rows of the table and end a bit further down.

  2. I am supposed to draw the lines on the right side that extend then on top to the left.

  3. On firefox the rounded corners behave strange in combination with the overlay box (see on the right). In chrome the rounded corners look like expected.


I tried to get the code out of my scripts. It is a bit tricky since I generate the table using R (don't ask ;)).






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








html css html-table css-tables







share|improve this question

























  • Please supply your code so I can amend it :)

    – Daniel Vickers
    Nov 22 '18 at 9:22











  • throw some table html in some where and then I'll have a play with it. Like codepen.io/#

    – Carol McKay
    Nov 22 '18 at 9:22











  • :) ok, I am generating the html in r, but I will try to copy it and add the relevant css.

    – Trollbrot
    Nov 22 '18 at 9:25











  • Imo try to implement this work with div not table. Based on what the artworks tell me it's easier to do the job with divs rather table.

    – Colin Cline
    Nov 22 '18 at 9:55






  • 1





    Tell the designer that table elements in HTML have alot of layout restrictions (which he probably should know about since it's his job to design for HTML).

    – connexo
    Nov 22 '18 at 10:16
















0












0








0


1






I got the following table design from a designer and was asked to implement it in html/css.



Design



I tried around and got to the following implementation, but now I am stuck and feel I was running in the wrong direction.



My current implementation



My approach was to add empty columns/rows to separate between the vertical boxes and the areas that don't have the overlay boxes.
Some problems I am now facing:




  1. The vertical boxes should start a bit higher then the colored rows of the table and end a bit further down.

  2. I am supposed to draw the lines on the right side that extend then on top to the left.

  3. On firefox the rounded corners behave strange in combination with the overlay box (see on the right). In chrome the rounded corners look like expected.


I tried to get the code out of my scripts. It is a bit tricky since I generate the table using R (don't ask ;)).






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








html css html-table css-tables







share|improve this question
















I got the following table design from a designer and was asked to implement it in html/css.



Design



I tried around and got to the following implementation, but now I am stuck and feel I was running in the wrong direction.



My current implementation



My approach was to add empty columns/rows to separate between the vertical boxes and the areas that don't have the overlay boxes.
Some problems I am now facing:




  1. The vertical boxes should start a bit higher then the colored rows of the table and end a bit further down.

  2. I am supposed to draw the lines on the right side that extend then on top to the left.

  3. On firefox the rounded corners behave strange in combination with the overlay box (see on the right). In chrome the rounded corners look like expected.


I tried to get the code out of my scripts. It is a bit tricky since I generate the table using R (don't ask ;)).






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








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





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





html css html-table css-tables




html css html-table css-tables






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 22 '18 at 10:05









Pete

41k1876116




41k1876116










asked Nov 22 '18 at 9:18









TrollbrotTrollbrot

4111513




4111513













  • Please supply your code so I can amend it :)

    – Daniel Vickers
    Nov 22 '18 at 9:22











  • throw some table html in some where and then I'll have a play with it. Like codepen.io/#

    – Carol McKay
    Nov 22 '18 at 9:22











  • :) ok, I am generating the html in r, but I will try to copy it and add the relevant css.

    – Trollbrot
    Nov 22 '18 at 9:25











  • Imo try to implement this work with div not table. Based on what the artworks tell me it's easier to do the job with divs rather table.

    – Colin Cline
    Nov 22 '18 at 9:55






  • 1





    Tell the designer that table elements in HTML have alot of layout restrictions (which he probably should know about since it's his job to design for HTML).

    – connexo
    Nov 22 '18 at 10:16





















  • Please supply your code so I can amend it :)

    – Daniel Vickers
    Nov 22 '18 at 9:22











  • throw some table html in some where and then I'll have a play with it. Like codepen.io/#

    – Carol McKay
    Nov 22 '18 at 9:22











  • :) ok, I am generating the html in r, but I will try to copy it and add the relevant css.

    – Trollbrot
    Nov 22 '18 at 9:25











  • Imo try to implement this work with div not table. Based on what the artworks tell me it's easier to do the job with divs rather table.

    – Colin Cline
    Nov 22 '18 at 9:55






  • 1





    Tell the designer that table elements in HTML have alot of layout restrictions (which he probably should know about since it's his job to design for HTML).

    – connexo
    Nov 22 '18 at 10:16



















Please supply your code so I can amend it :)

– Daniel Vickers
Nov 22 '18 at 9:22





Please supply your code so I can amend it :)

– Daniel Vickers
Nov 22 '18 at 9:22













throw some table html in some where and then I'll have a play with it. Like codepen.io/#

– Carol McKay
Nov 22 '18 at 9:22





throw some table html in some where and then I'll have a play with it. Like codepen.io/#

– Carol McKay
Nov 22 '18 at 9:22













:) ok, I am generating the html in r, but I will try to copy it and add the relevant css.

– Trollbrot
Nov 22 '18 at 9:25





:) ok, I am generating the html in r, but I will try to copy it and add the relevant css.

– Trollbrot
Nov 22 '18 at 9:25













Imo try to implement this work with div not table. Based on what the artworks tell me it's easier to do the job with divs rather table.

– Colin Cline
Nov 22 '18 at 9:55





Imo try to implement this work with div not table. Based on what the artworks tell me it's easier to do the job with divs rather table.

– Colin Cline
Nov 22 '18 at 9:55




1




1





Tell the designer that table elements in HTML have alot of layout restrictions (which he probably should know about since it's his job to design for HTML).

– connexo
Nov 22 '18 at 10:16







Tell the designer that table elements in HTML have alot of layout restrictions (which he probably should know about since it's his job to design for HTML).

– connexo
Nov 22 '18 at 10:16














1 Answer
1






active

oldest

votes


















3














Your table design indeed is tricky, but I think I managed to get it working.



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


And here you have the CSS (i wrote SCSS in the code pen, this is the compiled result)



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;

}


And here is the code pen: https://codepen.io/anon/pen/dQmymP



(Please ignore the appearance, I did not have time to style it with proper colors, spacing and font)



I checked it in Chrome, Firefox and Edge. Let me know it this works for you.






share|improve this answer
























  • Great! Looks like you could pretty much solve all my big issues. Will try to port that back into my R script, but already a big Thank you!

    – Trollbrot
    Nov 22 '18 at 14:34











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427469%2ffancy-css-table-design-with-overlaying-colors%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









3














Your table design indeed is tricky, but I think I managed to get it working.



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


And here you have the CSS (i wrote SCSS in the code pen, this is the compiled result)



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;

}


And here is the code pen: https://codepen.io/anon/pen/dQmymP



(Please ignore the appearance, I did not have time to style it with proper colors, spacing and font)



I checked it in Chrome, Firefox and Edge. Let me know it this works for you.






share|improve this answer
























  • Great! Looks like you could pretty much solve all my big issues. Will try to port that back into my R script, but already a big Thank you!

    – Trollbrot
    Nov 22 '18 at 14:34
















3














Your table design indeed is tricky, but I think I managed to get it working.



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


And here you have the CSS (i wrote SCSS in the code pen, this is the compiled result)



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;

}


And here is the code pen: https://codepen.io/anon/pen/dQmymP



(Please ignore the appearance, I did not have time to style it with proper colors, spacing and font)



I checked it in Chrome, Firefox and Edge. Let me know it this works for you.






share|improve this answer
























  • Great! Looks like you could pretty much solve all my big issues. Will try to port that back into my R script, but already a big Thank you!

    – Trollbrot
    Nov 22 '18 at 14:34














3












3








3







Your table design indeed is tricky, but I think I managed to get it working.



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


And here you have the CSS (i wrote SCSS in the code pen, this is the compiled result)



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;

}


And here is the code pen: https://codepen.io/anon/pen/dQmymP



(Please ignore the appearance, I did not have time to style it with proper colors, spacing and font)



I checked it in Chrome, Firefox and Edge. Let me know it this works for you.






share|improve this answer













Your table design indeed is tricky, but I think I managed to get it working.



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


And here you have the CSS (i wrote SCSS in the code pen, this is the compiled result)



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;

}


And here is the code pen: https://codepen.io/anon/pen/dQmymP



(Please ignore the appearance, I did not have time to style it with proper colors, spacing and font)



I checked it in Chrome, Firefox and Edge. Let me know it this works for you.







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 22 '18 at 13:42









FitziFitzi

35529




35529













  • Great! Looks like you could pretty much solve all my big issues. Will try to port that back into my R script, but already a big Thank you!

    – Trollbrot
    Nov 22 '18 at 14:34



















  • Great! Looks like you could pretty much solve all my big issues. Will try to port that back into my R script, but already a big Thank you!

    – Trollbrot
    Nov 22 '18 at 14:34

















Great! Looks like you could pretty much solve all my big issues. Will try to port that back into my R script, but already a big Thank you!

– Trollbrot
Nov 22 '18 at 14:34





Great! Looks like you could pretty much solve all my big issues. Will try to port that back into my R script, but already a big Thank you!

– Trollbrot
Nov 22 '18 at 14:34


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427469%2ffancy-css-table-design-with-overlaying-colors%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Create new schema in PostgreSQL using DBeaver

Image
0 At the beginning of my current job I had limited access to DB but recently my role is changed to superuser, admin, and owner. My colleague who was the previous DB admin is able to create a schema or change the permissions as there is a permission tab in the properties and he can change permissions by clicking easily. Would you please let me know how I can create schema and change permissions as well? Why his dbeaver looks different from me? He can easily right click on the schema folder on top of all schemas on the left side column and select create new schema while I do not have that, like the following picture I found on the internet. postgresql database-schema dbeaver share | improve this question
Read more

Deepest pit of an array with Javascript: test on Codility

Image
0 $begingroup$ This is the question from a Codility test, as a task in an interview: DeepestPit - problem description A non-empty zero-indexed array A consisting of N integers is given. A pit in this array is any triplet of integers (P, Q, R) such that: ·         0 ≤ P < Q < R < N; ·         sequence [A[P], A[P+1], ..., A[Q]] is strictly decreasing, i.e. A[P] > A[P+1] > ... > A[Q]; ·         sequence A[Q], A[Q+1], ..., A[R] is strictly increasing, i.e. A[Q] < A[Q+1] < ... < A[R]. The depth of a pit (P, Q, R) is the number min {A[P] − A[Q], A[R] − A[Q]}. For example, consider array A consisting of 10 elements such that: A[0] = 0 A[1] = 1 A[2] = 3 A[3] = -2 A[4] = 0 A[5] = 1 A[6] = 0 A[7] = -3 A[8] = 2 A[9] = 3 Triplet (2, 3, 4) is
Read more

Costa Masnaga

Image
.mw-parser-output .avviso .mbox-text-div>div,.mw-parser-output .avviso .mbox-text-full-div>div{font-size:90%}.mw-parser-output .avviso .mbox-image div{width:52px}.mw-parser-output .avviso .mbox-text-full-div .hide-when-compact{display:block} Questa voce o sezione sull'argomento Lombardia non cita le fonti necessarie o quelle presenti sono insufficienti . Puoi migliorare questa voce aggiungendo citazioni da fonti attendibili secondo le linee guida sull'uso delle fonti. Segui i suggerimenti del progetto di riferimento. Costa Masnaga comune Localizzazione Stato   Italia Regione Lombardia Provincia Lecco Amministrazione Sindaco Sabina Panzeri (Al centro il cittadino) dall'08/06/2009 Territorio Coordinate 45°46′N 9°17′E  /  45.766667°N 9.283333°E 45.766667; 9.283333  ( Costa Masnaga ) Coordinate: 45°46′N 9°17′E  /  45.766667°N 9.283333°E 45.766667; 9.283333  ( Costa Masnaga ) Altitudine 318 m s.l.m
Read more