ISP

by Shridhar Baddur

HTML

<table border="1" cellpadding="0" cellspacing="0" style="width: 100%; border-color: black;">   
    <tbody><tr style="background-color: rgb(192, 192, 192);">                                                    <td colspan="5" style="width: auto;">                                                    2.MDCP Services (if applicable) </td>                                                </tr><tr style="background-color: rgb(192, 192, 192);">                                <td colspan="2" style="10cm">(a) Service/Item Type and (b)Provider</td>                                <td style="width: 9cm;">(c)Rationale</td>                                <td style="width: 3cm;">                                    <p align="center">(d) Hours per week</p>                                </td>                                <td style="width: 5cm;">                                    <p align="center">(e)Begin/End Date</p>                                </td>                            </tr><tr>                                            <td colspan="2" style="width: 10cm; height: auto;"><div class="divRow"><div class="divCol"><div class="checkbox" style="margin-left: 10px;">                                    <div class="checkmark">                                        <div class="checkmark_stem"></div>                                        <div class="checkmark_kick"></div>                                    </div>                                </div></div><div class="divCol"> <div style="margin-left: 5px">In-home Respite RN</div></div></div></td>                                            <td style="width: 10cm;">&nbsp;</td><td rowspan="2" style="width: 3cm;" align="center">0.25</td><td rowspan="2" style="width: 3cm;" align="center">2018-11-28/2018-12-12</td></tr>                                           <tr>                                            <td colspan="2" style="width: auto;"><div style="margin-left:10px">Proivder INhome<br><br></div></td>                          ...

CSS

.divTable{
display: table;
border: 1px black;
width: 100%;
}
.divTableRow {
display: table-row;
border: 0.3px black;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
border: 0.3px black;
}
.divTableCell, .divTableHead {
border: 0.3px solid black;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
border: 0.3px black;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
border: 0.3px black;
}
.divTableBody {
display: table-row-group;
border: 0.3px black;
}
.checkmark {
display:inline-block;
width: 20px;
height:25px;
transform: rotate(55deg);
}
.checkmark_stem {
position: absolute;
width:2px;
height:20px;
background-color:#000000;
left:7px;
top:-2px;
}
.checkmark_kick {
position: absolute;
width:10px;
height:2px;
background-color:#000000;
left:1px;
top:16px;
}
.checkbox {
margin-right: 5px;
width: 15px;
height: 15px;
border: 1px solid;
float : left;
margin-top: 5px;
margin-bottom: 5px
}
.divRow {
display:table
}
.divCol {
display: table-cell;
vertical-align: middle
}
.tbcell-border {
border: 1px solid #000;
}