一、html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test4.css">
</head>
<body>
<table border="2" >
<caption>表格标题</caption>
<tr ><td>1111111111111111111111s s是事实是是s1bbbbbbbbbbbbbbbbbbbbbbbbb表格标题表格标题表格标题表格标题 dafad11</td><td></td><td>3</td></tr>
<tr><td>2</td><td>3</td><td>4</td></tr>
<tr><td>3</td><td>4</td><td>5</td></tr>
</table>
<ul>
<li>222222222222222222222222222222222</li>
<li>3333333333333</li>
<li>444444444444444</li>
</ul>
</body>
</html>
二、CSS
@charset "UTF-8";
table{
width: 500px;
border-collapse: collapse;
border-spacing: 1px;
caption-side: bottom;
empty-cells: hide;
table-layout: fixed;
word-break:break-all;
}
ul{
list-style-position: outside;
width: 30px;
word-break:break-all;
}
/*border-collapse:collapse将单元格的边框合并，默认值separate为隔离/分开的意思
border-spacing: 1px;设置单元格之间边框的距离，默认是2px
caption-side: bottom;设置标题的位置
empty-cells: hide;用来设置空单元格是否显示,如果border-collapse为合并边框的话，设置无效,show为显示
table-layout: auto;默认值auto表格宽度自适应文字，fixed不会改变单元格宽度，会进行换行，数字或字母的换行需要设定word-break:break-all属性
list-style-possition的值为insid时列表各项的文字以标志上下对齐；为outside时列表第一行文字上下对齐
list-style-image将图像设置为列表项标志
list-style-type的其他的值参照HtmlNote中列表元素的使用*/
三、效果展示
