css table布局样式用法总结

个人习惯在项目中经常会用到table布局，这里来汇总下经常会用到的样式（会不断更新的）：

一、table加边框

直接写上这段style代码就可以了

<style type="text/css">
        table
        {
            border-collapse: collapse; /*相邻边被合并;separate: 边框独立*/
            border: none;
            width: 820px;
        }
        td
        {
            border: solid #CCC 1px;
        }
    </style>

<table>
                        <tr>
                            <td style="width: 40%; height: 30px;">
                                用户：
                            </td>
                            <td style="width: 60%">
                                张三
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 40%; height: 30px;">
                                年级：
                            </td>
                            <td>
                                高中
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 40%; height: 30px;">
                                备注：
                            </td>
                            <td>
                            </td>
                        </tr>
                    </table>

效果显示：

二、td 内容太多，想自动换行

设置table 的 style="table-layout:fixed;" 

设置td的 style="word-wrap:break-word;" 

<span style="color:#ff0000;font-weight: bold;"> </span><span style="color:#330033;"><table  style="table-layout: fixed;">
                        <tr>
                            <td style="width: 40%; height: 30px;">
                                用户：
                            </td>
                            <td style="width: 60%">
                                张三
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 40%; height: 30px;">
                                年级：
                            </td>
                            <td>
                                高中
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 40%; height: 30px;">
                                备注：
                            </td>
                            <td style="word-wrap: break-word;">
                            MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDDI6d306Q8fIfCOaTXyiUeJHkrIvYISRcc73s3vF1ZT7XN8RNPwJxo8pWaJMmvyTn9N4HQ632qJBVHf8sxHi/fEsraprwCtzvzQETrNRwVxLO5jVmRGi60j8Ue1efIlzPXV9je9mkjzOmdssymZkh2QhUrCmZYI/FCEa3/cNMW0QIDAQAB 
                            </td>
                        </tr>
                    </table></span>

不加样式，原效果图：

加上红色字体的代码，效果显示如下

会持续更新的...