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

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

Fotorealismo

Image
Guerrino Boatto, Venice's St. Barnaba Church and canal Il fotorealismo è un genere di pittura basato sull'uso di una o più fotografie dalle quali l'artista prende le informazioni necessarie da utilizzare poi nel processo della creazione dell'opera, in genere ad olio o ad acrilico, al fine di avere un aspetto finale il più simile possibile alla fotografia. Indice 1 Storia 2 Lista dei fotorealisti 3 Note 4 Voci correlate 5 Altri progetti Storia | Il fotorealismo è un movimento che nasce negli Stati Uniti d'America alla fine degli anni sessanta [1] sulla scia della Pop Art [2] [3] [4] , e insieme condividono il carattere reazionario verso la travolgente ascesa dei media, che alla metà del ventesimo secolo si trasforma in un fenomeno di massa talmente imponente da minacciare il valore dell'immagine nell'arte. [5] [6] Ne consegue così che, colto il gesto d'inizio che fu della Pop Art, i fotorealisti aprono ad un ...
Read more

Sidney Franklin

Image
Questa voce sull'argomento registi statunitensi è solo un abbozzo . Contribuisci a migliorarla secondo le convenzioni di Wikipedia. Sidney Franklin, foto di Carl Van Vechten Oscar alla memoria Irving G. Thalberg 1943 Sidney Franklin , all'anagrafe Sidney Arnold Franklin , (San Francisco, 21 marzo 1893 – Santa Monica, 18 maggio 1972), è stato un regista, produttore cinematografico e attore statunitense. Il 20 giugno 1963, si sposò con l'attrice australiana Enid Bennett. Il matrimonio durò fino alla morte dell'attrice, il 14 maggio 1969 [1] Indice 1 Filmografia 1.1 Regista 1.2 Aiuto regia (parziale) 1.3 Produttore 1.4 Attore (parziale) 2 Note 3 Altri progetti 4 Collegamenti esterni Filmografia | Regista | The Baby , co-regia Chester M. Franklin (1915) The Rivals , co-regia Chester M. Franklin (1915) Little Dick's First Case , co-regia Chester M. Franklin (1915) Her Filmland Hero , co-...
Read more