JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<h3>Outstanding Debt</h3>

<p>Balance as of 09/30/2015</p>
<table class="table table-hover" dropzone="copy">
    <thead>
        <tr>
            <th scope="col">Financial Institution</th>
            <th scope="col">Date Financed</th>
            <th scope="col">Loan Amount</th>
            <th scope="col">Amount Paid</th>
            <th scope="col">Unpaid Balance</th>
            <th scope="col">Purpose</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="cursor: default;">Bank of America</td>
            <td style="cursor: default;">03/09/2006</td>
            <td style="cursor: default;">$36,044,935</td>
            <td style="cursor: default;">$26,764,319</td>
            <td style="cursor: default;">$9,280,616</td>
            <td>Vehicle Purchase</td>
        </tr>
        <tr>
            <td style="cursor: default;">BBVA Compass Bank</td>
            <td style="cursor: default;">03/08/2012</td>
            <td style="cursor: default;">$20,000,000</td>
            <td style="cursor: default;">5,540,000</td>
            <td style="cursor: default;">$14,460,000</td>
            <td>Rail Car Purchase</td>
        </tr>
        <tr>
            <td colspan="6" style="height: 10px; cursor: default;"></td>
        </tr>
        <tr id="tableTotal">
            <td style="cursor: default;">Total Debt as of 09/30/2015</td>
            <td style="cursor: default;"> </td>
            <td style="cursor: default;">$56,044,935</td>
            <td style="cursor: default;">$32,304,319</td>
            <td style="cursor: default;">$23,740,616</td>
            <td> </td>
        </tr>
    </tbody>
</table>

CSS

#tableTotal td, th {
     font-weight:bold;
 }
 /*td {padding:5px;}*/
 #financeTable td, #financeTable th {
     text-align:center !important;
     border:none !important;
 }
 #financeTable, #financeTable td {
     border:none !important;
 }
 .table>thead>tr>th {
     vertical-align: bottom;
     border-bottom: none !important;
 }