JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dl.dropbox.com/u/331982/TopSecret/tables.css">
<link rel="stylesheet" href="http://dl.dropbox.com/u/331982/TopSecret/styles.css">
<html xmlns="http://www.w3.org/1999/xhtml">
    <body style="background-image:none;">
        <div class="popup_container">
            <div class="popup-content-border">
                <div class="manage-table">
                    <div id="media_container">
                        
                        <div id="tableContainer" class="tableContainer">
                            <table class="app header" width="100%" border="0" cellpadding="0" cellspacing="0">
                                <thead class="fixedHeader">
                                    <tr class="IE7Header">
                                        <th class="th-first">
                                            &nbsp;
                                        </th>
                                        <th class="sortable" id="name">
                                            <span>Name<span class="arrow"></span></span>
                                        </th>
                                        <th class="sortable" id="category_name">
                                            <span>Category<span class="arrow"></span></span>
                                        </th>
                                        <th class="sortable headerSortUp" id="updated_at">
                                            <span>Last Updated<span class="arrow"></span></span>
                                        </th>
                                        <th class="sortable" id="document_size">
                                            <span>File size<span class="arrow"></span></span>
                                        </th>
                                    </tr>
                                </thead> <tbody class="scrollContent">
                                <tr>
                                    <td...

CSS

body {
    overflow: hidden;
}

td.td-first {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

thead tr {
   width: 100% !important;
}

.table_container{
    overflow:auto;
}

table.app thead.fixedHeader tr{
    height: 29px !important;
    box-shadow: 0px 2px 2px #888;
}


/* THE FOLLOWING CODE IS TO FIX THE HEADER IN THE TABLE

http://www.imaputz.com/cssStuff/bigFourVersion.html
 */


    /* define height and width of scrollable area. Add 16px to width for scrollbar          */
    div.tableContainer {
        clear: both;
        overflow: auto;
        }

    /* Reset overflow value to hidden for all non-IE browsers. */
    html>body div.tableContainer {
        overflow: hidden;
        width: 100%
    }

    /* define width of table. IE browsers only                 */
    div.tableContainer table {
        float: left;
        width: 100%
    }

    /* define width of table. Add 16px to width for scrollbar.           */
    /* All other non-IE browsers.                                        */
    html>body div.tableContainer table {
        width: 100%
    }

    /* set table header to a fixed position. WinIE 6.x only                                       */
    /* In WinIE 6.x, any element with a position property set to relative and is a child of       */
    /* an element that has an overflow property set, the relative value translates into fixed.    */
    /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
    thead.fixedHeader tr {
        position: fixed;
        z-index: 100;
    }

    /* set THEAD element to have block level attributes. All other non-IE browsers            */
    /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
    html>body thead.fixedHeader tr {
    }

    /* make the TH elements pretty */
    thead.fixedHeader th {
    }

    /* make the A elements pretty. makes for nice clickable headers                */
   ...

JavaScript

var $j = jQuery.noConflict();