tables 2.0

by Victor

HTML

<div class="halfSized">Logo here</div>
<div class="halfSized">
    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...

CSS

body{
    background:rgb(245,245,245);
    margin-bottom:40px;
}
.halfSized {
    width:45%;
    min-height:40px;
    background:#e3e3e3;    display:block;
    float:left;
    margin-bottom:20px;
    padding:2.5%;
    box-shadow:0 2px 4px #999;
    
}
table {
    width:95%;
    margin: 10px auto;
}
tr {
    width:100% !important;
    margin-bottom:10px;
    border-bottom:2px solid #BFBFBF !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; */
    color:#666;}
a {
    text-decoration:none;
    color:white;
}
a:hover {
    position:relative;
    top:1px;
}
.save {
    float:right;
    padding:10px 30px;
    border-radius:30px;
    background:green;
    margin:3px 10px;
}
.cancel {
    float:right;
    padding:10px 30px;
    border-radius:30px;
    background:red;
    margin:3px 10px;
}
.showOptions {
    display:block;
    height:45px;
    text-indent:19px;
    line-height:2.7;
    width:45px;
    border-radius:50%;
    background:black;
    color:white;
    float:left;
}
.showOptions:hover {
    background:#3399cc;
}
.controlWrap {
    width:95%;
    margin:10px auto;
    height:50px;
    clear:both;
}