表格样式设置小记[关于嵌套表格]
[color=blue][size=large]嵌套表格宽度自适应问题：[/size][/color]
设置外层单元格
内外间距为0：margin: 0; padding: 0;设置内层嵌套表格width为100%，高度见下节，padding: 0, 0, 0, 0;
[color=green]示例：[/color]
<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;">
[color=blue][size=large]嵌套表格高度自适应问题：[/size][/color]
使用height：100%,将表格高度设为100%，内层表格高度也设为100%
[color=green]示例：[/color]
<td style="height:100%;">
<table style="height:100%;"></table>
</td>
[color=blue][size=large]包含边框的嵌套表格：[/size][/color]
边框使用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;
}
除标题以外的中间行保留右及下边框，最后一行只保留右边框
[color=green]示例：[/color]
<tr>
<td width="10%" class="tdleftup">{$customername}</td>
<td width="90%" colspan="10"
style="height: 100%; margin: 0; padding: 0;">
<table class="tablecss" style="height: 100%">
<?php $chsum = count($channellist); ?>
<volist name="channellist" id="channel"> <if
condition="$i eq $chsum">
<tr>
<td style="width: 11%;" class="tdright">{$channel.channelname}</td>
<td style="width: 89%; height: 100%; margin: 0; padding: 0;">
<table class="tablecss" 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%;" class="tdright">{$column.columnname}</td>
<td style="width: 13.52%;" class="tdright">{$column.playstart}</td>
<td style="width: 13.33%;" class="tdright">{$column.playend}</td>
<td
style="width: 60.91%; height: 100%; margin: 0; padding: 0;">
<table class="tablecss" 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%;" class="tdright">{$operate.editstatus}</td>
<td style="width: 14.8%;" class="tdright">{$operate.schema}</td>
<td style="width: 20.2%;" class="tdright">{$operate.duration}</td>
<td style="width: 20.5%;" class="tdright">{$operate.finishtime}</td>
<td style="width: 16.5%;" class="tdright">{$operate.count}</td>
<td style="width: 13%;" class="tdnone"><a
target="_blank" class="nodio"
href="/OperationRuleDetail/index?pindex={$operate.pindex}"
class="pmp_sel" title="查看成品详情"> <img
src="__PUBLIC__/images/icons/icon_arrow.png" />
</a></td>
</tr>
<else />
<tr>
<td style="width: 15%;" class="tdleftup">{$operate.editstatus}</td>
<td style="width: 14.8%;" class="tdleftup">{$operate.schema}</td>
<td style="width: 20.2%;" class="tdleftup">{$operate.duration}</td>
<td style="width: 20.5%;" class="tdleftup">{$operate.finishtime}</td>
<td style="width: 16.5%;" class="tdleftup">{$operate.count}</td>
<td style="width: 13%;" class="tdbottom"><a
target="_blank" class="nodio"
href="/OperationRuleDetail/index?pindex={$operate.pindex}"
class="pmp_sel" title="查看成品详情"> <img
src="__PUBLIC__/images/icons/icon_arrow.png" />
</a></td>
</tr>
</if> </volist>
</table>
</td>
</tr>
<else />
<tr>
<td style="width: 12.24%;" class="tdleftup">{$column.columnname}</td>
<td style="width: 13.52%;" class="tdleftup">{$column.playstart}</td>
<td style="width: 13.33%;" class="tdleftup">{$column.playend}</td>
<td
style="width: 60.91%; height: 100%; margin: 0; padding: 0;">
<table class="tablecss" style="height: 100%">
<volist name="operateinfo[$column['columnid']]"
id="operate">
<tr>
<td style="width: 15%;" class="tdleftup">{$operate.editstatus}</td>
<td style="width: 14.8%;" class="tdleftup">{$operate.schema}</td>
<td style="width: 20.2%;" class="tdleftup">{$operate.duration}</td>
<td style="width: 20.5%;" class="tdleftup">{$operate.finishtime}</td>
<td style="width: 16.5%;" class="tdleftup">{$operate.count}</td>
<td style="width: 13%;" class="tdbottom"><a
target="_blank" class="nodio"
href="/OperationRuleDetail/index?pindex={$operate.pindex}"
class="pmp_sel" title="查看成品详情"> <img
src="__PUBLIC__/images/icons/icon_arrow.png" />
</a></td>
</tr>
</volist>
</table>
</td>
</tr>
</if> </volist>
</table>
</td>
</tr>
[color=blue][size=large]表格中英文换行问题：[/size][/color]
兼容 IE 和 FF 的换行 CSS 推荐样式
最好的方式是
word-wrap:break-word; overflow:hidden;
此种方式为不考虑嵌套表格的情况，若嵌套表格，应使用：
word-wrap:break-word; word-break:break-all;
强制自动换行
[color=blue][size=large]嵌套表格宽度设置问题：[/size][/color]
2层嵌套，可以设置调节宽度尽量为整数，若为三层及以上嵌套，两种方式：
1、表格各列宽度没有明显区别，可以设置为宽度相等，此时可以不设高度，使用colspan解决
[color=green]示例：[/color]
<table class="fixtable defineTable" 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%" class="tdleftup">{$customername}</td>
<td width="91%" [color=red]colspan="10"[/color] style="padding: 0;">
<table class="tablecss">
......
2、表格各列宽度有分别，应有宽窄区分，此时可使用表格标题与表格体同一比例的方法设置宽度，保证无误差限制
[color=green]示例：[/color]
<table class="fixtable" id="infolist"
style="TABLE-LAYOUT: fixed; word-break: break-all; WORD-WRAP: break-word; width: 100%;"
border="1">
<thead>
<tr>
<th width="10%" class="tdleftup thcss">客户</th>
<th width="90%" colspan="10" style="margin: 0; padding: 0;">
<table class="tablecss">
<tr>
<th style="width: 11%;" class="tdright thcss">频道</th>
<th style="width: 89%; margin: 0; padding: 0;">
<table class="tablecss">
<tr>
<th style="width: 12.24%;" class="tdright thcss">栏目</th>
<th style="width: 13.52%;" class="tdright thcss">实际播出最早时间</th>
<th style="width: 13.33%;" class="tdright thcss">实际播出最晚时间</th>
<th style="width: 60.91%; margin: 0; padding: 0;">
<table class="tablecss">
<tr>
<th style="width: 15%;" class="tdright thcss">加工状态</th>
<th style="width: 14.8%;" class="tdright thcss">加工方式</th>
<th style="width: 20.2%;" class="tdright thcss">成品总时长</th>
<th style="width: 20.5%;" class="tdright thcss">分发完成时间</th>
<th style="width: 16.5%;" class="tdright thcss">分发条数(条)</th>
<th style="width: 13%;" class="tdnone thcss">查看详情</th>
</tr>
</table>
</th>
</tr>
</table>
</th>
</tr>
</table>
</th>
</tr>
</thead>
<tbody id="livetable">
<tr>
<td width="10%" class="tdleftup">{$customername}</td>
<td width="90%" colspan="10"
style="height: 100%; margin: 0; padding: 0;">
<table class="tablecss" style="height: 100%">
<volist name="channellist" id="channel">
<tr>
<td style="width: 11%;" class="tdright">{$channel.channelname}</td>
<td style="width: 89%; height: 100%; margin: 0; padding: 0;">
<table class="tablecss" style="height: 100%">
<volist name="columnlist[$channel['channelid']]" id="column">
<tr>
<td style="width: 12.24%;" class="tdright">{$column.columnname}</td>
<td style="width: 13.52%;" class="tdright">{$column.playstart}</td>
<td style="width: 13.33%;" class="tdright">{$column.playend}</td>
<td
style="width: 60.91%; height: 100%; margin: 0; padding: 0;">
<table class="tablecss" style="height: 100%;">
<volist name="operateinfo[$column['columnid']]"
id="operate">
<tr>
<td style="width: 15%;" class="tdright">{$operate.editstatus}</td>
<td style="width: 14.8%;" class="tdright">{$operate.schema}</td>
<td style="width: 20.2%;" class="tdright">{$operate.duration}</td>
<td style="width: 20.5%;" class="tdright">{$operate.finishtime}</td>
<td style="width: 16.5%;" class="tdright">{$operate.count}</td>
<td style="width: 13%;" class="tdnone"><a
target="_blank" class="nodio"
href="/OperationRuleDetail/index?pindex={$operate.pindex}"
class="pmp_sel" title="查看成品详情"> <img
src="__PUBLIC__/images/icons/icon_arrow.png" />
</a></td>
</tr>
<else />
<tr>
<td style="width: 15%;" class="tdleftup">{$operate.editstatus}</td>
<td style="width: 14.8%;" class="tdleftup">{$operate.schema}</td>
<td style="width: 20.2%;" class="tdleftup">{$operate.duration}</td>
<td style="width: 20.5%;" class="tdleftup">{$operate.finishtime}</td>
<td style="width: 16.5%;" class="tdleftup">{$operate.count}</td>
<td style="width: 13%;" class="tdbottom">
......
[color=blue][size=large]设置单元格内容样式，可使用内嵌div的形式[/size][/color]
[color=blue][size=large]无法使用div的情况：[/size][/color]
如下图
<tr style="vertical-align: top; padding-top: 0px;">
<td
style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px; word-break: keep-all;"><span
class="spancss">客户：</span></td>
<td
style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px; word-break: keep-all;"><span
style="color: red;" id='customer_name'></span></td>
<td
style="padding-left: 20px; padding-right: 0px; padding-bottom: 0px; word-break: keep-all;"><span
class="spancss">包含格式：</span></td>
<td style="padding-left: 0px; padding-bottom: 0px;"><span
style="color: red;" id="format_info"> <volist
name='formatinfo' id='formatstr'>{$formatstr.format}<br>
</volist>
</span></td>
</tr>
</table>
浙公网安备 33010602011771号