纯CSS实现固定table表格表头滚动

HTML

<h3>Table A</h3>
<table >
    <thead>
        <tr>
            <td>Name</td>
            <td>phone</td>a
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>AAAA</td>
            <td>323232</td>
        </tr>
        <tr>
            <td>BBBBB</td>
            <td>323232</td>
        </tr>
        <tr>
            <td>CCCCC</td>
            <td>3435656</td>
        </tr>
    </tbody>
</table>
<hr/>
<h3>Table B</h3>
<table >
    <thead>
        <tr>
            <td>Name</td>
            <td>phone</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>AAAA</td>
            <td>323232</td>
        </tr>
        <tr>
            <td>BBBBB</td>
            <td>323232</td>
        </tr>
        <tr>
            <td>CCCCC</td>
            <td>3435656</td>
        </tr>
    </tbody>
</table>

CSS

table ,tr td{
    
    
    border:1px solid red
}
tbody {
    
    
    display:block;
    height:50px;
    overflow:auto;
}
thead, tbody tr {
    
    
    display:table;
    width:100%;
    table-layout:fixed;
}
thead {
    
    
    width: calc( 100% - 1em )
}
table {
    
    
    width:400px;
}

在线演示Demo1：http://jsfiddle.net/f2XYF/8/
在线演示Demo2：http://jsfiddle.net/f2XYF/16/