JSFiddle - React, Tailwind, and code Playground

HTML

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css" rel="stylesheet">
<html>
<div id='dialog'></div>
<div id='amtz_div'>
<table id="amtz_table">
    <tr>
        <td>Start Date:</td>
        <td><b>03/03/2011</b></td>
    </tr>
    <tr>
        <td>End Date:</td>
        <td><b>03/03/2014</b></td>
    </tr>
    <tr>
        <td>Useful Life:</td>
        <td><b>36 Months</b></td>
    </tr>
    <tr>
        <td>Expense Acct:</td>
        <td><b>Web Hosting (600-7)</b></td>
    </tr>
    <tr>
        <td colspan="2">Amortization Table:</td>
    </tr>
    <tr>
        <td colspan="2">
        <table class="list_table sked">
            <tr class="list_head">
                <td class="rt_90">Monthly Total</td>
                <td class="rtpd_15">Account Balance</td>
            </tr>
            <tr title="Transaction No. 1" class="amortized">
                <td class="right">13.90</td>
                <td class="rtpd_15">243.25</td>
            </tr>
            <tr title="Transaction No. 1" class="amortized">
                <td class="right">20.85</td>
                <td class="rtpd_15">236.30</td>
            </tr>
            <tr title="Transaction No. 1" class="amortized">
                <td class="right">27.80</td>
                <td class="rtpd_15">229.35</td>
            </tr>
            <tr title="Transaction No. 1" class="amortized">
                <td class="right">34.75</td>
                <td class="rtpd_15">222.40</td>
            </tr>
            <tr title="Transaction No. 1" class="amortized">
                <td class="right">41.70</td>
                <td class="rtpd_15">215.45</td>
            </tr>
            <tr title="Transaction No. 1" class="amortized">
                <td class="right">48.65</td>
                <td class="rtpd_15">208.50</td>
            </tr>
            <tr title="Transaction No. 1" class="amortized">
                <td class="right">55.60</td>
      ...

CSS

.ui-dialog, #amtz_table {font-size:70%;}
.list_table { margin-left:auto !important; margin-right:auto !important; font-size:95%; border:1px solid red;}
.list_head {background: #8bacc9; color: #ffffff; font-weight:800; }
.center {text-align:center; }
.right {text-align:right; }
#amtz_div {display:none;}
#amtz_table, table.sked { width:100%; }
#amtz_table tr { line-height: 20px; }
#amtz_table tr.amortized { background: grey; }
td.lt_60 {text-align:left; width:60px;}
td.lt_160 {text-align:left; width:160px;}
td.rt_90 {text-align:right; width:90px;}
td.rtpd_15 {text-align:right; padding-right:15px;}

JavaScript

jQuery(document).ready(function() {
    var content = jQuery('#amtz_div').html();
    var title = 'Amortization Schedule';
    var open = function() {
        var container = jQuery(".ui-dialog");
        var target = jQuery('tr.amortized:last');
        container.scrollTop(target.offset().top - container.offset().top + container.scrollTop());
        target.css('background', 'red');
    }
    jQuery("#dialog").attr('title', title).html(content).dialog({
        modal: true,
        width: 400,
        height: 400,
        resizable: false,
        open: open
    });
});