JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<!--Start Financial Table-->
<table class="financial-table" style="width:100%;" cellspacing="0">
  <tr>
    <td class="thirty thick-border left light"></td>
    <td class="ten thick-border right light">Note</td>		
    <td class="ten thick-border right light">Unrestricted funds<br><br><br>£’000</td>
    <td class="ten thick-border right light">Pension scheme funding reserve<br>£’000</td>		
    <td class="ten thick-border right light">Restricted funds<br><br><br>£’000</td>
    <td class="ten thick-border right light">Endowment funds<br><br><br>£’000</td>		
    <td class="ten thick-border right">Total<br>2014<br><br><br>£’000</td> 
    <td class="ten thick-border right light">Total<br>2013<br><br><br>£’000</td>   
  </tr>
  <tr>
    <td class="thirty thin-border left">Incoming Resources from Charitable Activities<br><span class="light">Activities in furtherance of the charity’s objects:</span></td>
    <td class="ten thin-border right light"></td>	
    <td class="ten thin-border right light"></td>	
    <td class="ten thin-border right light"></td>
    <td class="ten thin-border right light"></td>	
    <td class="ten thin-border right light"></td>	
    <td class="ten thin-border right light"></td>	
    <td class="ten thin-border right light"></td>	  
  </tr>
  <tr>
    <td class="thirty thin-border left light">Subscription income</td>
    <td class="ten thin-border right light">–</td>	
    <td class="ten thin-border right light">7,320</td>	
    <td class="ten thin-border right light">–</td>
    <td class="ten thin-border right light">–</td>	
    <td class="ten thin-border right light">–</td>	
    <td class="ten thin-border right">7,320</td>	
    <td class="ten thin-border right light">7,159</td>	  
  </tr>
  <tr>
    <td class="thirty thin-border left light">Clients</td>
    <td class="ten thin-border right light">–</td>	
    <td class="ten thin-border right light">580</td>	
    <td class="ten thin-border right light">–</td>
    <td class="ten thin-border right...

CSS

/* Financial Table Content */

table.financial-table {
	position: relative;
	width: 100%; height: auto;
    font-family: 'bariol_regularregular';
    font-weight: bold;
    color: #4a5058;
    font-size: 15px; line-height: 1.3em;
    margin-top: 20px; margin-bottom: 40px;
}

table.financial-table td {
    vertical-align: text-top;
    padding-top: 2px; padding-bottom: 2px;
}

table.financial-table td.thin-border {
    border-bottom: 1px solid #999999;
}

table.financial-table td.thick-border {
    border-bottom: 2px solid #4a5058;
}

table.financial-table td.right {
    text-align: right;
}

table.financial-table td.light, 
table.financial-table td .light{
    font-weight: normal;
}

table.financial-table td.hundred { width: 100%; }
table.financial-table td.ninety { width: 90%; }
table.financial-table td.eighty { width: 80%; }
table.financial-table td.seventy { width: 70%; }
table.financial-table td.sixty { width: 60%; }
table.financial-table td.fifty { width: 50%; }
table.financial-table td.forty { width: 40%; }
table.financial-table td.thirty { width: 30%; }
table.financial-table td.twenty { width: 20%; }
table.financial-table td.ten { width: 10%; }