JSFiddle - React, Tailwind, and code Playground

by luizz

HTML

<div class="div-table-content">
<div class="div-table div-table-head">
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
</div>
<div class="div-table titulo" data-titulo="TESTESTE">
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td">
        <span data-name="prod3-1" class="" style="background-color: rgb(176, 197, 176); margin-left: -50%; "></span>
        <span data-name="prod3-1" class="" style="background-color: rgb(91, 183, 91); margin-left: 0%; "></span>
        
    </div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td">
         <span data-name="prod3-1" class="" style="background-color: rgb(91, 183, 91); "></span>
    </div>
    <div class="tb-td"></div>
    <div class="tb-td">
       
    </div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    </div>

<div class="div-table titulo" data-titulo="TESTESTE">
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td">
        <span data-name="prod3-1" class="" style="background-color: rgb(176, 197, 176); margin-left: -50%; "></span>
        <span data-name="prod3-1" class="" style="background-color: rgb(91, 183, 91); margin-left: 0%; "></span>
        
    </div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td">
         <span data-name="prod3-1" class="" style="background-color: rgb(91, 183, 91); "></span>
    </div>
    <div class="tb-td"></div>
    <div class="tb-td">
       
    </div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div...

CSS

body, * {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}

/* TABLE */

.div-table-content{
    display:block;
    margin:auto;
    width:990px;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    border-radius: 5px;
    overflow:hidden;
}

.div-table-content .div-table-head .tb-td{
    border-top: none !important;
} 

.div-table{
    display: table;
    width:100%;
    border-collapse: collapse;
    position: relative;
}

.div-table[data-titulo]:after{
  content: attr(data-titulo);
    width: 100%;
    position: absolute;
    height: 24px;
    text-align: center;
    left: 0%;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 3px #444343;
    z-index: 1;
    letter-spacing: 9px;
    pointer-events: none;
    display: block;
}

.div-table .tb-td{
    display: table-cell;
    width: 250px;
    border: 1px solid #aaa;
    text-align: center;
    height: 20px;
    position: relative;
    overflow: hidden;
}

.div-table-content .tb-td {
    border-bottom: none !important;
}

.div-table .tb-td span{
    width: 100% !important;
    height: 100% !important;
     position: absolute;
}


@media print{
      .div-table.titulo:after{
        content: attr(data-titulo);
        width: 100%;
        position: absolute;
        height: 24px;
        text-align: center;
        left: 0%;
        font-size: 20px;
        line-height: 20px;
        text-transform: uppercase;
        color: rgb(255, 255, 255);
        text-shadow: 1px 1px 3px #444343;
        z-index: 1;
        letter-spacing: 9px;
        pointer-events: none;
        display: block;
        webkit-print-color-adjust:exact;
        -webkit-filter:opacity(1);
    }
}

JavaScript

$(function(){
    $(".tb-td span").click(function(){
        $(this).remove();
    });
});