搜索到
1
篇与
的结果
-
表格相关的属性 1. 表格相关的属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表格相关的属性</title> <style> table { /* border-width: 2px; border-color: black; border-style: solid; */ border: 2px green solid; } td,th { border: 2px green solid; } h2 { border: 3px red solid; } span { border: 3px skyblue dotted; } </style> </head> <body> <h2>边框相关的属性不仅仅是表格才能使用</h2> <span>药水哥</span> <table> <caption>人员信息</caption> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>政治面貌</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>孙笑川</td> <td>33</td> <td>党员</td> </tr> <tr> <td>2</td> <td>刘波</td> <td>30</td> <td>团员</td> </tr> <tr> <td>3</td> <td>药水哥</td> <td>30</td> <td>群众</td> </tr> </tbody> </table> </body> </html>2. 表格独有的属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表格独有的属性</title> <style> table { border: 2px green solid; width: 500px; /* 控制表格的列宽 */ table-layout: fixed; /* 单元格间距（生效的前提是：不能合并边框） */ border-spacing: 10px; /* 合并相邻单元格的边框 */ border-collapse: collapse; /* 隐藏没有内容的单元格（生效的前提是：不能合并边框） */ empty-cells: hide; /* 设置表格标题的位置 */ caption-side: top; } td,th { border: 2px orange solid; } .number { width: 50px; height: 50px; } </style> </head> <body> <table> <caption>人员信息</caption> <thead> <tr> <th class="number">序号</th> <th>姓名</th> <th>年龄</th> <th>政治面貌</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>孙笑川</td> <td>33</td> <td>党员</td> </tr> <tr> <td>2</td> <td>刘波</td> <td></td> <td>团员</td> </tr> <tr> <td>3</td> <td>药水哥</td> <td>30</td> <td>群众</td> </tr> </tbody> </table> </body> </html>
