JSFiddle - React, Tailwind, and code Playground

HTML

<table id="menu_table" width="100%" style="border:collapse" cellpadding="0" cellspacing="0" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
    <tr>
        <td valign="top" colspan=2>
            <iframe frameborder="0" src="http://www.google.co.za/intl/en_com/images/srpr/logo1w.png" id="banner_content" name="banner_content" scrolling="no" style="width:100%;height:40px;"></iframe>
        </td>
    </tr>
    <tr>
        <td class="header" valign="top" style="textweight:normal; " >
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
                <li>Item 6</li>
                <li>Item 7</li>
                <li>Item 8</li>  
                <li>Item 9</li>
                <li>Item 10</li>
                <li>Item 11</li>
                <li>Item 12</li>
                <li>Item 13</li>
                <li>Item 14</li>
                <li>Item 15</li>             
            </ul>
        </td>
        <td class="header" >
            another control
        </td>
    </tr>
</table>

CSS

body {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    display: block;
    overflow: hidden;
}

ul
{
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
    z-index: 100;
    display: block;    
}

li
{
    display: inline;
    float: left;
    position: relative;
}

table {
    border-spacing: 2px 2px;
    border-collapse: separate;
}

td {
    white-space: nowrap;
}