个人习惯在项目中经常会用到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>
不加样式,原效果图:
加上红色字体的代码,效果显示如下
会持续更新的...