纯CSS3 实现Table切换

演示效果：

html代码：
<div class="css3-table">
        <ul>
            <li>
                <input type="radio" checked name="tabs" id="tab1">
                <label for="tab1">Tab-1</label>
                <div id="table-content-1" class="content hide">
                环企优站科技公司于12月16日正式搬迁至广州市天河区员村四横路8号石东商务中四楼A06  联系电话：13533957190  欢迎莅临指导~</div>
            </li>
            <li>
            <input type="radio" name="tabs" id="tab2">
            <label for="tab2">Tab-2</label>
            <div id="table-content-2" class="content hide">环企优站建站神器PK行业建站公司,http://usezan.com/</div>
            </li>
            <li>
                <input type="radio" name="tabs" id="tab3">
            <label for="tab3">Tab-3</label>
            <div id="table-content-3" class="content hide">图标在企业高端网站模板中用途广泛（网站模板）,高端智能建站,高端模板网站,智能一步到位</div>
            </li>
        </ul>
   </div>

css代码：

*{padding: 0;margin: 0}
ul,li{list-style-type: none;}
body,html{
    height: 100%;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    font-weight: 100;
    background: #ebd6aa;
    text-align: center;
    font-family: helvetica;
}
.css3-table input[type=radio] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
.css3-table{
position: relative;
width: 600px;
height: 400px;
margin: 50px auto 0;
}
.css3-table input[type=radio] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
.hide{display: none;}
.css3-table ul li{float: left;}
.css3-table ul li label{
display: block;
    padding: 10px 20px;
    border-radius: 2px 2px 0 0;
    color: #006dfe;
    font-size: 24px;
    font-weight: normal;
    font-family: 'Roboto', helveti;
    background: rgba(255,255,255,.2);
    cursor: pointer;
    position: relative;
    top: 3px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.css3-table ul li .content{
    z-index: 2;
    text-align: left;
    overflow: hidden;
    width: 100%;
    font-size: 20px;
    line-height: 140%;
    padding-top: 10px;
    background: #006dfe;
    padding: 15px;
    color: #fff;
    position: absolute;
    top: 53px;
    left: 0;
    box-sizing: border-box;
}
[id^=tab]:checked + label{
background: #006dfe;
    color: #fff;
}
[id^=tab]:checked ~ [id^=table-content]{
display: block;
}