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

41.4k1877119




41.4k1877119










asked Nov 22 '18 at 9:18









TrollbrotTrollbrot

4161513




4161513













  • 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

40539




40539













  • 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

android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

Image
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 0 This is a simple project showing cubes on Unity, exported to android project and imported on Android studio. On maifest file it showed following warning: Expecting <uses-feature android:name="android.software.leanback" android:required="false" /> tag I have no information about it. And also on default emptyview android project does not use/mention this feature. I know it is required by TV's and such but why its not added by default? Why is this? And Should I concern about it? android unity3d ...
Read more

'app-layout' is not a known element: how to share Component with different Modules

Image
0 My application was working fine until I decided to go with lazy loading: So, my shared component looks like this: import { Component, Renderer2 } from '@angular/core'; export interface FormModel { captcha?: string; } @Component({ selector: 'app-layout', templateUrl: './app-layout.component.html', styleUrls: ['./app-layout.css'] }) export class FullLayoutComponent { } app-layout.component.ts I am using this component in my Another component say school-home.component.html like this: <app-layout> </app-layout> and it was working fine until I created a Module school-home.module.ts like this: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SchoolhomeRoutingModule ...
Read more

SQL update select statement

Image
0 I'm trying to update an entry in my database (postgresql). I'm having a problem with updating the query: INSERT INTO prices (price, product_id) SELECT product_price, commn_id FROM products_temp as prod WHERE NOT EXISTS (SELECT * FROM prices od WHERE prod.commn_id = od.product_id) OR prod.product_price != ( SELECT price FROM prices as p WHERE p.product_id = prod.commn_id order by p.end desc LIMIT 1 ) Query works fine when i delete: OR prod.product_price != ( SELECT price FROM prices as p WHERE p.product_id = prod.commn_id order by p.end desc LIMIT 1 ) So it seems to me that it's looping through this operation. My question is, how can I fix it? sql postgresql ...
Read more