一、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中列表元素的使用*/
三、效果展示