JSFiddle - React, Tailwind, and code Playground

by mflodin

HTML

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.0/build/cssreset/reset-min.css">
<table  border="0">
    <thead>
        <tr>
            <th colspan="2" rowspan="2">LOTR</th><th colspan="2">1010</th><th colspan="10">1011</th>
        </tr>
        <tr>            <th>Nov</th><th>Dec</th><th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th><th>May</th><th>Jun</th><th>Jul</th><th>Aug</th><th>Sep</th><th>Oct</th>
        </tr>
    </thead>
    <tbody>
    <tr class="wounded">
        <td class="tableLabel" rowspan="2">The Shire</td><td>Wounded</td><td>846</td><td>21</td><td>4</td><td>48</td><td>64</td><td>12</td><td>44</td><td>88</td><td>13</td><td>12</td><td>78</td><td></td>
    </tr>
    <tr class="dead">
        <td>Dead</td><td>56</td><td>78</td><td>6</td><td>64</td><td>45</td><td>64</td><td>65</td><td>64</td><td>78</td><td>13</td><td></td><td></td>
    </tr>
    <tr class="wounded">
        <td class="tableLabel" rowspan="2">Minas Tirith</td><td>Wounded</td><td>8</td><td>45</td><td>12</td><td>54</td><td>874</td><td>21</td><td>621</td><td>44</td><td>45</td><td>48</td><td>84</td><td>64</td>
    </tr>
    <tr class="Dead">
        <td>Dead</td><td>54</td><td>54</td><td>5</td><td>6</td><td>64</td><td>64</td><td>46</td><td>2</td><td>82</td><td>2</td><td></td><td></td>
    </tr>
    <tr class="wounded">
        <td class="tableLabel" rowspan="2">Fangorn</td><td>Wounded</td><td>546</td><td>386</td><td>73</td><td>513</td><td>546</td><td>546</td><td>4</td><td>5</td><td>48</td><td>84</td><td>45</td><td></td>
    </tr>
    <tr class="dead">
        <td>Dead</td><td>86</td><td>64</td><td>68</td><td>46</td><td>6</td><td>846</td><td>86</td><td>4</td><td>64</td><td>6</td><td></td><td></td>
    </tr>
    <tr class="wounded">
        <td class="tableLabel" rowspan="2">Barad-dûr</td><td>Wounded</td><td>121</td><td>12</td>
        
        <td><input type="text" value="123"/></td>
       ...

CSS

input
{
    #display:block;
    font-size: 11px;
    width: 100%; /* how the hell is this calculated? */
    text-align:center;
    padding: 0;
    position:absolute;
    top: 0px;
    bottom: 0px;
    border: none;
    background: yellow;
}

td, th {
    border: 1px solid black;
    #padding: 0 4px;
    #padding: 0;
}
    
td {
    #text-align: right;
    #width: 35px;
    #overflow: hidden;
    position: relative;
}

table 
{
    font-family: arial,helvetica,sans-serif;
    font-size: 11px;
    border-collapse: collapse;
    #border-spacing: 0;
    #color: #fff;
    width: 750px;
    text-align: center;
}

.tableLabel, thead, tfoot
{
    background: #999;
    color: #fff;
}