tables 2.0

by Victor

HTML

<div class="halfSized">Logo here
    craft beer conditioning tank alcohol priming length. craft beer. length all-malt crystal malt goblet noble hops crystal malt goblet. primary fermentation lauter primary fermentation microbrewery pitch. caramel malt scotch ale mash tun. imperial becher goblet, chocolate malt grainy goblet. barrel. keg pitching krug units of bitterness aerobic anaerobic hydrometer primary fermentation ale keg. autolysis keg cask: craft beer, biere de garde.
</div>

<div class="controlWrap">    
    <a href="" class="showOptions">&#164;</a>
    <a href="" class="save">Save</a>
    <a href="" class="cancel">Cancel</a>
</div>


<table><tbody>
<tr dir="ltr"><td class="hd"><p style="height:16px;">.</p></td><td class="s10" dir="ltr">Aluminum Nitrate</td><td class="s11">200</td><td class="s11">275</td><td class="s11">300</td><td class="s11">450</td><td class="s12" dir="ltr">A</td><td></td><td class="s12" dir="ltr">B</td><td class="s11">150</td><td class="s11">180</td><td class="s11">180</td><td class="s11">250</td><td class="s11">250</td><td class="s12" dir="ltr">A</td><td class="s12" dir="ltr">A</td><td class="s12" dir="ltr">C</td><td></td><td></td></tr>
    <tr dir="ltr"><td class="hd"><p style="height:16px;">.</p></td><td class="s10" dir="ltr">Aluminum Nitrate</td><td class="s11">200</td><td class="s11">275</td><td class="s11">300</td><td class="s11">450</td><td class="s12" dir="ltr">A</td><td></td><td class="s12" dir="ltr">B</td><td class="s11">150</td><td class="s11">180</td><td class="s11">180</td><td class="s11">250</td><td class="s11">250</td><td class="s12" dir="ltr">A</td><td class="s12" dir="ltr">A</td><td class="s12" dir="ltr">C</td><td></td><td></td></tr>
    <tr dir="ltr"><td class="hd"><p style="height:16px;">.</p></td><td class="s10" dir="ltr">Aluminum Nitrate</td><td class="s11">200</td><td class="s11">275</td><td class="s11">300</td><td class="s11">450</td><td class="s12" dir="ltr">A</td><td></td><td class="s12" dir="ltr">B</td><td...

CSS

body{
    background:rgb(245,245,245);
    margin-bottom:40px;
    
}
.halfSized {
    width:45%;
    margin:10px auto;
    min-height:40px;
    background:#e3e3e3;    display:block;

    padding:2.5%;
    box-shadow:0 2px 4px #999;
    
}
table {
    width:95%;
    margin: 10px auto;
}
tr {
    width:100% !important;
    margin-bottom:10px;
    border-bottom:1px solid #BFBFBF !important; 
    border-bottom:1px solid #999 !important; 
    padding:10px;
    box-shadow: 0px 15px 16px -20px rgba(0,0,0,.6);
}
td{
    text-align:center;
    padding:15px 5px 15px !important;
    margin:10px;
    text-shadow: 1px 1px 0 #fff,1px 2px 0 #fff;
        font-weight:bold;
}
tr:first-child {
    border-top:none !important;
}

tr td:first-child {display:none;}
tr td:nth-child(2) {
    text-indent:10px;
    text-align:left;
    font-weight:bold;
    /* font-style:italic; */
    /* background:rgb(40,40,40); */
    background:#e3e3e3;
    text-shadow: 0 0 0 transparent;
    /* border-left:3px solid #3399cc; */background: #f5f5f5; /* Old browsers */
background: -moz-linear-gradient(left, #f5f5f5 0%, #bec6d1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f5f5f5), color-stop(100%,#bec6d1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #f5f5f5 0%,#bec6d1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #f5f5f5 0%,#bec6d1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #f5f5f5 0%,#bec6d1 100%); /* IE10+ */
background: linear-gradient(to right, #f5f5f5 0%,#bec6d1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#bec6d1',GradientType=1 ); /* IE6-9 */
    color:#333;
    text-shadow:1px 1px 0 #fff;
    border-right:1px solid #999;
}
a {
    text-decoration:none;
    color:white;
}
a:hover {
    position:relative;
    top:1px;
}
.save {
    float:right;
    padding:10px 30px;
    border-radius:30px;
    background:green;
   ...