表格样式设置小记[关于嵌套表格]
嵌套表格宽度自适应问题：
设置外层单元格
内外间距为0：margin: 0; padding: 0;设置内层嵌套表格width为100%，高度见下节，padding: 0, 0, 0, 0;
示例：
<td style="width: 89%; padding: 0;"><table style="width: 100%;
padding: 0, 0, 0, 0;
border-left: 0px solid;
border-right: 0px solid;
border-top: 0px solid;
border-bottom: 0px solid;
WORD-WRAP: break-word;
word-break: break-all;">
嵌套表格高度自适应问题：
使用height：100%,将表格高度设为100%，内层表格高度也设为100%
示例：
<td style="height:100%;">
<table style="height:100%;"></table>
</td>
包含边框的嵌套表格：
边框使用css样式中设置的border：1;不要使用border=1；以解决ie与火狐兼容问题
外层边框设为1，内层边框根据情况设置不同的边框样式：
.tablecss {
width: 100%;
padding: 0, 0, 0, 0;
border-left: 0px solid;
border-right: 0px solid;
border-top: 0px solid;
border-bottom: 0px solid;
WORD-WRAP: break-word;
word-break: break-all;
}
.tdleftup {
padding: 0, 0, 0, 0;
border-left: 0px solid;
border-right: 1px solid;
border-top: 0px solid;
border-bottom: 1px solid;
}
.tdbottom {
padding: 0, 0, 0, 0;
border-left: 0px solid;
border-right: 0px solid;
border-top: 0px solid;
border-bottom: 1px solid;
}
.tdright {
padding: 0, 0, 0, 0;
border-left: 0px solid;
border-right: 1px solid;
border-top: 0px solid;
border-bottom: 0px solid;
}
.tdnone {
padding: 0, 0, 0, 0;
border-left: 0px solid;
border-right: 0px solid;
border-top: 0px solid;
border-bottom: 0px solid;
}
除标题以外的中间行保留右及下边框，最后一行只保留右边框
示例：
<tr>
<td width="10%" colspan="10"
style="height: 100%; margin: 0; padding: 0;">
<table style="height: 100%">
<?php $chsum = count($channellist); ?>
<volist name="channellist" id="channel"> <if
condition="$i eq $chsum">
<tr>
<td style="width: 11%;" style="height: 100%">
<?php $cosum = count($columnlist[$channel['channelid']]); ?>
<volist name="columnlist[$channel['channelid']]" id="column">
<if condition="$i eq $cosum">
<tr>
<td style="width: 12.24%;" style="height: 100%;">
<?php $opsum = count($operateinfo[$column['columnid']]); ?>
<volist name="operateinfo[$column['columnid']]"
id="operate"> <if condition="$i eq $opsum">
<tr>
<td style="width: 15%;" title="查看成品详情"> <img
src="__PUBLIC__/images/icons/icon_arrow.png" />
</a></td>
</tr>
<else />
<tr>
<td style="width: 15%;" title="查看成品详情"> <img
src="__PUBLIC__/images/icons/icon_arrow.png" />
</a></td>
</tr>
</if> </volist>
</table>
</td>
</tr>
<else />
<tr>
<td style="width: 12.24%;" style="height: 100%">
<volist name="operateinfo[$column['columnid']]"
id="operate">
<tr>
<td style="width: 15%;" title="查看成品详情"> <img
src="__PUBLIC__/images/icons/icon_arrow.png" />
</a></td>
</tr>
</volist>
</table>
</td>
</tr>
</if> </volist>
</table>
</td>
</tr>
表格中英文换行问题：
兼容 IE 和 FF 的换行 CSS 推荐样式
最好的方式是
word-wrap:break-word; overflow:hidden;
此种方式为不考虑嵌套表格的情况，若嵌套表格，应使用：
word-wrap:break-word; word-break:break-all;
强制自动换行
嵌套表格宽度设置问题：
2层嵌套，可以设置调节宽度尽量为整数，若为三层及以上嵌套，两种方式：
1、表格各列宽度没有明显区别，可以设置为宽度相等，此时可以不设高度，使用colspan解决
示例：
<table id="infolist"
style="TABLE-LAYOUT: fixed; word-break: break-all; WORD-WRAP: break-word; width: 100%;">
<thead>
<tr style="background-color: #7FB4D4;">
<th >客户</th>
<th >频道</th>
<th >栏目</th>
<th >实际播出最早时间</th>
<th >实际播出最晚时间</th>
<th >加工状态</th>
<th >加工方式</th>
<th >成品总时长</th>
<th >分发完成时间</th>
<th >分发条数（条）</th>
<th >查看详情</th>
</tr>
</thead>
<tbody id="livetable">
<tr>
<td width="9%" colspan="10" style="padding: 0;">
<table id="infolist"
style="TABLE-LAYOUT: fixed; word-break: break-all; WORD-WRAP: break-word; width: 100%;"
border="1">
<thead>
<tr>
<th width="10%" colspan="10" style="margin: 0; padding: 0;">
<table colspan="10"
style="height: 100%; margin: 0; padding: 0;">
<table style="height: 100%">
<volist name="channellist" id="channel">
<tr>
<td style="width: 11%;" style="height: 100%">
<volist name="columnlist[$channel['channelid']]" id="column">
<tr>
<td style="width: 12.24%;" style="height: 100%;">
<volist name="operateinfo[$column['columnid']]"
id="operate">
<tr>
<td style="width: 15%;" title="查看成品详情"> <img
src="__PUBLIC__/images/icons/icon_arrow.png" />
</a></td>
</tr>
<else />
<tr>
<td style="width: 15%;" class="tdbottom">
......
设置单元格内容样式，可使用内嵌div的形式
