全文总结,内容优先使用宽度;table-layout指定了各部分宽度,且向下有继承性,遇到合并单元格时怎么破;word-wrap 和word-break解决超长文本在规定的框中显示溢出怎么办;
一般属性总结
边框属性border(table)
间距属性cellpadding cellpacing padding
字体属性font
文本属性text-align text-index vertical-align
背景属性backgrond 颜色 /图片 位置 重复
td和table的边框可以单独设置
.td{border:solid #add9c0; border-width:0px 1px 1px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}详细介绍特殊属性应用
例一
常见问题,主要内容优先使用宽度。
nowrap="nowrap"用于td,规定表格单元格的内容不换行。
white-space:nowrap用于css,规定段落中的文本不换行。
<tr>
<td style="white-space:nowrap">Never increase, beyond what is necessary,</td><td>Never increase, beyond what is necessary, the number of entities required to explain anything</td></tr>
table-layout属性
用法:作用于table标签,显示单元格列宽的计算法则。
取值:auto(默认)列宽由内容确定。加载慢
fixed。并设置第一行单元格宽度,之后的每一行单元格按照第一行的尺寸进行设定。加载快。
常见问题,第一行设置单元格合并后,第二行的宽度显示为平分。
解决办法,加一个隐形行设定为第一行,display:none;
<table border="1" style="table-layout:fixed;width:200px;">
<tr display="none"> <td style="width:30%"></td> <td style="width:20%"></td> <td style="width:50%"></td> </tr> <tr> <td style="30%">a</td> <td colspan="2">b</td> </tr> <tr> <td>a</td> <td style="20%">b20%</td> <td style="50%">b50%</td> </tr> </table>常见问题,单元格内容溢出
word-wrap:break-word是否允许浏览器在单词内进行断句。对于长单词,首先尝试移入下一行,若仍然溢出,断句。
word-break:all-break怎样进行单词内的断句。直接简单粗暴单词内断句。原样式加word-wrap:break-word加word-break:break-all;