这是我参与8月更文挑战的第7天，活动详情查看： 8月更文挑战”juejin.cn/post/698796…
看下ui效果图：
一开始嫌麻烦 加边框：于是用定位写量两边的border 缩放 长度还是原来的长度
table 其实是可以写
- td 是 table datacell 的简称，表示表格的单元格，这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。
- 不加boder是没有边框的
- border-collapse 是“边框塌陷”的意思，当属性值为 collapse 时，可以使表格的双边框变为单边框。
- HTML 也支持单元格的合并，包括跨行合并和跨列合并两种。
- rowspan：表示跨行合并。在 HTML 代码中，允许我们使用 rowspan 特性来表明单元格所要跨越的行数。
- colspan：表示跨列合并。同样的，在 HTML 中，允许我们使用 colspan 特性来表明单元格所要跨越的列数。
- 不论是 rowspan 还是 colspan 都是 td标签的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
/* table-layout: fixed; */
}
table tr:first-child{
color: brown;
border-color:blue ;
}
table tr:first-child th{
}
/* tr {
border: 0;
} */
.one{
border-right: none;
}
.tow{
border-left:none;
border-right: none;
}
.three{
border-left:none;
/* border-right: 1px solid blue; */
}
</style>
</head>
<body>
<table border="1">
<caption>这是表格的标题</caption>
<tr>
<th class="one"> 名称</th>
<th class="tow">官网</th>
<th class="three">性质</th>
</tr>
<tr>
<td>C语言中文网</td>
<td>http://c.biancheng.net/</td>
<td>教育</td>
</tr>
<tr>
<td rowspan="2">百度</td>
<td>http://www.baidu.com/</td>
<td>搜索</td>
</tr>
<tr>
<!-- <td>当当</td>
<td>http://www.dangdang.com/</td>
<td>图书</td> -->
<td colspan="2">http://www.dangdang.com/</td>
</tr>
</table>
</body>
</html>
- rowspan 属性表示向下合并单元格，colspan 属性表示向右合并单元格。
- 每次合并 n 个单元格都要少写 n-1 个标签。
- 提示：即使一个单元格中没有任何内容，我们仍需使用 <td> 或 <th> 元素来表示一个空单元格的存在，
- 建议在 <td> 或 <th> 中加入 （空格），否则低版本的 IE 可能无法显示出这个单元格的边框。
效果：
::v-deep {
.table-wrapper .has-gutter tr th {
border: 1px solid #e8e8e8;
border-left: none;
border-right: none;
background-color: #fafafa;
}
.table-wrapper .has-gutter tr th:first-child {
border-left: 1px solid #e8e8e8 !important;
}
// last-child 失效
.table-wrapper .has-gutter tr th:nth-child(9) {
border-right: 1px solid #e8e8e8 !important;
}
}
