Mixing
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.
I tried around and got to the following implementation, but now I am stuck and feel I was running in the wrong direction.
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:
- The vertical boxes should start a bit higher then the colored rows of the table and end a bit further down.
- I am supposed to draw the lines on the right side that extend then on top to the left.
- 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
edited Nov 22 '18 at 10:05
Pete
41.4k1877119
asked Nov 22 '18 at 9:18
TrollbrotTrollbrot
4161513
|
show 1 more comment
0
I got the following table design from a designer and was asked to implement it in html/css.
I tried around and got to the following implementation, but now I am stuck and feel I was running in the wrong direction.
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:
- The vertical boxes should start a bit higher then the colored rows of the table and end a bit further down.
- I am supposed to draw the lines on the right side that extend then on top to the left.
- 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
edited Nov 22 '18 at 10:05
Pete
41.4k1877119
asked Nov 22 '18 at 9:18
TrollbrotTrollbrot
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 thattableelements 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
|
show 1 more comment
0
0
0
1
I got the following table design from a designer and was asked to implement it in html/css.
I tried around and got to the following implementation, but now I am stuck and feel I was running in the wrong direction.
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:
- The vertical boxes should start a bit higher then the colored rows of the table and end a bit further down.
- I am supposed to draw the lines on the right side that extend then on top to the left.
- 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
edited Nov 22 '18 at 10:05
Pete
41.4k1877119
asked Nov 22 '18 at 9:18
TrollbrotTrollbrot
4161513
I got the following table design from a designer and was asked to implement it in html/css.
I tried around and got to the following implementation, but now I am stuck and feel I was running in the wrong direction.
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:
- The vertical boxes should start a bit higher then the colored rows of the table and end a bit further down.
- I am supposed to draw the lines on the right side that extend then on top to the left.
- 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
edited Nov 22 '18 at 10:05
Pete
41.4k1877119
asked Nov 22 '18 at 9:18
TrollbrotTrollbrot
4161513
edited Nov 22 '18 at 10:05
Pete
41.4k1877119
asked Nov 22 '18 at 9:18
TrollbrotTrollbrot
4161513
edited Nov 22 '18 at 10:05
Pete
41.4k1877119
edited Nov 22 '18 at 10:05
Pete
41.4k1877119
edited Nov 22 '18 at 10:05
Pete
41.4k1877119
41.4k1877119
asked Nov 22 '18 at 9:18
TrollbrotTrollbrot
4161513
asked Nov 22 '18 at 9:18
TrollbrotTrollbrot
4161513
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 thattableelements 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
|
show 1 more comment
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 thattableelements 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
|
show 1 more comment
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.
answered Nov 22 '18 at 13:42
FitziFitzi
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
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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.
answered Nov 22 '18 at 13:42
FitziFitzi
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
add a comment |
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.
answered Nov 22 '18 at 13:42
FitziFitzi
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
add a comment |
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.
answered Nov 22 '18 at 13:42
FitziFitzi
40539
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.
answered Nov 22 '18 at 13:42
FitziFitzi
40539
answered Nov 22 '18 at 13:42
FitziFitzi
40539
answered Nov 22 '18 at 13:42
FitziFitzi
40539
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
add a comment |
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
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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
tableelements 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