formatting and sorting with a js array

Photoriot

Following https://www.datatables.net/examples/data_sources/js_array.html
After a few hours I still can't get better than this result:
http://fauxbrain.com/pr/home/status.html
1. The formatting is misaligned, and generally doesn't resemble that of the example pages - how to fix alignment?
2. Sorting is alphabetical - can I sort longest_break times like 5:21:11 and 15:16:21 in numerical order?
3. Is there a way to set the default scroll window size?
4. I notice that it doesn't change anything to modify or delete the class on the table element.
Thanks,
Bill

Photoriot

I found the date-sorting answer on this site. Code using http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js and http://cdn.datatables.net/plug-ins/1.10.10/sorting/datetime-moment.js:

<script src="js/moment.min.js"></script>
<script src="js/datetime-moment.js"></script>
...
        $.fn.dataTable.moment( 'MM-DD-YYYY HH:mm:ss' );
        $.fn.dataTable.moment( 'H:mm:ss' );
        $('#browsers').dataTable( {
...

Photoriot

E.g. why does the class="display" not have any effect with these includes (no change deleting it)?

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/jquery.dataTables.min.css" type="text/css"></script>
<script src="js/tblstyle.css" type="text/css"></script>
<script src="js/moment.min.js"></script>
<script src="js/datetime-moment.js"></script>

<table id="browsers" class="display" style="width:100%"></table>