Create an overlay over a table column - html

Question

I have a table with 5 columns (city, 1st quarter, 2nd quarter, 3rd quarter, 4th quarter).
I want that if we already passed a quarter to display an overlay over that quarter's column. My problem is how to make an overlay that covers the whole column. I tried a solution but it would not cover the cell padding. Anybody has an idea how to approach that? Here is my code:
http://jsfiddle.net/7kp3atp7/1/

Answer 1

This is happening because there are spaces between table td. You can either use border-collapse: collapse or modify your current implementation. For example i create an overlay using pseudo-element :after and apply it to all td that has class disable:
/* line 452, ../sass/screen.scss */
.year-calendar {
width: 918px;
margin: 0 auto;
min-height: 260px;
height: auto;
background-color: #ffffff;
border: 8px solid transparent;
padding: 0px;
box-shadow: 1px 1px 30px 1px #adb2b7;
display: block;
border-radius: 8px 8px;
-o-border-radius: 8px 8px;
-ms-border-radius: 8px 8px;
-moz-border-radius: 8px 8px;
-webkit-border-radius: 8px 8px;
}
/* line 463, ../sass/screen.scss */
.year-calendar th, .year-calendar tr {
margin: 0;
padding: 0;
height: 40px;
text-align: center;
}
/* line 470, ../sass/screen.scss */
.year-calendar th {
font-family:"Gotham Medium";
font-size: 15px;
background-color: #0070b9;
border: 0;
border-right: 1px solid #adb2b7;
border-left: 1px solid #adb2b7;
border-top: none;
color: #ffffff;
display: table-cell;
width: 182px;
}
/* line 481, ../sass/screen.scss */
.year-calendar th:first-child {
text-align: left;
border-top-left-radius: 5px;
}
/* line 482, ../sass/screen.scss */
.year-calendar th:last-child {
border-top-right-radius: 5px;
}
/* line 484, ../sass/screen.scss */
.year-calendar td {
border: 0;
width: 182px;
border-right: 1px solid #adb2b7;
border-left: 1px solid #adb2b7;
font-family:"Gotham Medium";
font-size: 13px;
}
/* line 496, ../sass/screen.scss */
.year-calendar tr {
border: 0;
border-top: 1px solid #adb2b7;
border-bottom: 1px solid #adb2b7;
}
/* line 501, ../sass/screen.scss */
.year-calendar tr td:first-child, .year-calendar tr th:first-child {
border-left: none;
}
/* line 502, ../sass/screen.scss */
.year-calendar tr td:last-child, .year-calendar tr th:last-child {
border-right: none;
}
/* line 504, ../sass/screen.scss */
.year-calendar tr:first-child {
border-top: none;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/* line 509, ../sass/screen.scss */
.year-calendar tr:last-child {
border-bottom: none;
}
/* line 511, ../sass/screen.scss */
.year-calendar tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
/* line 514, ../sass/screen.scss */
.year-calendar tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
td, th {
position:relative;
}
td.disable:after {
content:"";
position:absolute;
background-color:black;
display:block;
width:100%;
height:100%;
top:0px;
left: -5px;
padding-left: 4px;
padding-right: 5px;
}
<table class="table year-calendar">
<thead>
<tr>
<th>City</th>
<th><span class="q1"></span>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th>Q4</th>
</tr>
</thead>
<tbody>
<tr>
<td>New York</td>
<td class="reserved disable"><span class="q1"></span>
<input name="" type="checkbox" value="1" checked="checked" disabled="disabled" />
</td>
<td class="reserved disable">
<input name="" type="checkbox" value="1" checked="checked" disabled="disabled" />
</td>
<td class="reserved disable">
<input name="" type="checkbox" value="1" checked="checked" disabled="disabled" />
</td>
<td class="reserved disable">
<input name="" type="checkbox" value="1" checked="checked" disabled="disabled" />
</td>
</tr>
<tr>
<td>San Francisco</td>
<td class="reserved disable"><span class="q1"></span>
<input name="" type="checkbox" value="1" checked="checked" disabled="disabled" />
</td>
<td class="available active">
<input name="" type="checkbox" value="1" checked="checked" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
</tr>
<tr>
<td>Boston</td>
<td class="available"><span class="q1"></span>
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
</tr>
<tr>
<td>Dallas</td>
<td class="available"><span class="q1"></span>
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
</tr>
<tr>
<td>Chicago</td>
<td class="available"><span class="q1"></span>
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
</tr>
</tbody>
</table>
Or in your example using border-collapse: collapse:
/* line 452, ../sass/screen.scss */
.year-calendar {
width: 918px;
margin: 0 auto;
min-height: 260px;
height: auto;
background-color: #ffffff;
border: 8px solid transparent;
padding: 0px;
box-shadow: 1px 1px 30px 1px #adb2b7;
display: block;
border-radius: 8px 8px;
-o-border-radius: 8px 8px;
-ms-border-radius: 8px 8px;
-moz-border-radius: 8px 8px;
-webkit-border-radius: 8px 8px;
border-collapse: collapse;
}
/* line 463, ../sass/screen.scss */
.year-calendar th,
.year-calendar tr {
margin: 0;
padding: 0;
height: 40px;
text-align: center;
}
/* line 470, ../sass/screen.scss */
.year-calendar th {
font-family: "Gotham Medium";
font-size: 15px;
background-color: #0070b9;
border: 0;
border-right: 1px solid #adb2b7;
border-left: 1px solid #adb2b7;
border-top: none;
color: #ffffff;
display: table-cell;
width: 182px;
}
/* line 481, ../sass/screen.scss */
.year-calendar th:first-child {
text-align: left;
border-top-left-radius: 5px;
}
/* line 482, ../sass/screen.scss */
.year-calendar th:last-child {
border-top-right-radius: 5px;
}
/* line 484, ../sass/screen.scss */
.year-calendar td {
border: 0;
width: 182px;
border-right: 1px solid #adb2b7;
border-left: 1px solid #adb2b7;
font-family: "Gotham Medium";
font-size: 13px;
}
/* line 496, ../sass/screen.scss */
.year-calendar tr {
border: 0;
border-top: 1px solid #adb2b7;
border-bottom: 1px solid #adb2b7;
}
/* line 501, ../sass/screen.scss */
.year-calendar tr td:first-child,
.year-calendar tr th:first-child {
border-left: none;
}
/* line 502, ../sass/screen.scss */
.year-calendar tr td:last-child,
.year-calendar tr th:last-child {
border-right: none;
}
/* line 504, ../sass/screen.scss */
.year-calendar tr:first-child {
border-top: none;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/* line 509, ../sass/screen.scss */
.year-calendar tr:last-child {
border-bottom: none;
}
/* line 511, ../sass/screen.scss */
.year-calendar tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
/* line 514, ../sass/screen.scss */
.year-calendar tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
td,
th {
position: relative;
}
.q1 {
position: absolute;
background-color: black;
display: block;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
<table class="table year-calendar">
<thead>
<tr>
<th>City</th>
<th><span class="q1"></span>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th>Q4</th>
</tr>
</thead>
<tbody>
<tr>
<td>New York</td>
<td class="reserved disable"><span class="q1"></span>
<input name="" type="checkbox" value="1" checked="checked" disabled="disabled" />
</td>
<td class="reserved disable">
<input name="" type="checkbox" value="1" checked="checked" disabled="disabled" />
</td>
<td class="reserved disable">
<input name="" type="checkbox" value="1" checked="checked" disabled="disabled" />
</td>
<td class="reserved disable">
<input name="" type="checkbox" value="1" checked="checked" disabled="disabled" />
</td>
</tr>
<tr>
<td>San Francisco</td>
<td class="reserved disable"><span class="q1"></span>
<input name="" type="checkbox" value="1" checked="checked" disabled="disabled" />
</td>
<td class="available active">
<input name="" type="checkbox" value="1" checked="checked" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
</tr>
<tr>
<td>Boston</td>
<td class="available"><span class="q1"></span>
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
</tr>
<tr>
<td>Dallas</td>
<td class="available"><span class="q1"></span>
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
</tr>
<tr>
<td>Chicago</td>
<td class="available"><span class="q1"></span>
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
<td class="available">
<input name="" type="checkbox" value="1" />
</td>
</tr>
</tbody>
</table>