疯狂--表格

<style>
    table{
        width:400px;
        border:1px solid black;
    }
    td{
        background-color: #ccc;
        border:1px solid black;
    }
</style>
//

表格标题caption支持top和bottom属性

<table style="border-collapse:collapse;caption-side:top;">
    <caption>无缝表格</caption>
 <tr>
 <td>java</td>
 <td>javascript</td>
 </tr>
 <tr>
 <td> 经典 java</td>
 <td>经典 javascript</td>
 </tr>
</table>
<table style="border-collapse:separate;empty-cells:hide;">
 <caption>隐藏空单元</caption>
 <tr>
 <td>java</td>
 <td>javascript</td>
 </tr>
 <tr>
 <td> 经典 java</td>
 <td></td>
 </tr>
</table>
<table style="border-collapse:separate;border-spacing:10px">
 <caption>单元格有间距</caption>
 <tr>
 <td>java</td>
 <td>javascript</td>
 </tr>
 <tr>
 <td> 经典 java</td>
 <td>经典 javascript</td>
 </tr>
</table>


2、控制表格布局

<style>
    table{
//固定布局方式
        table-layout: fixed;
        border-collapse: collapse;
        border:1px solid black;
    }
    td{
        background-color: #ccc;
        border:1px solid black;
    }
</style>
//

<table>
    <caption>两个col计算出来</caption>
    <col style="width:240px"/>
    <col style="width:80px"/>
 <tr>
 <td>java</td>
 <td>javascript</td>
 </tr>
 <tr>
 <td> 经典 java</td>
 <td>经典 javascript</td>
 </tr>
</table>
<table>
 <caption>第一行单元格宽度计算出来</caption>
 <tr>
 <td style="width:80px">java</td>
 <td style="width:300px">javascript</td>
 </tr>
 <tr>
 <td> 经典 java</td>
 <td>经典javascript</td>
 </tr>
</table>
<table style="width:300px">
 <caption>平均分配宽度</caption>
 <tr>
 <td>java</td>
 <td>javascript</td>
 </tr>
 <tr>
 <td> 经典 java</td>
 <td>经典 javascript</td>
 </tr>
</table>

转载于:https://www.cnblogs.com/chjb/p/4442725.html