折叠边框 border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开： 实例
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格宽度和高度 Width和height属性定义表格的宽度和高度。 下面的例子是设置100％的宽度，50像素的th元素的高度的表格： 实例
table
{
width:100%;
}
th
{
height:50px;
}
表格文字对齐 表格中的文本对齐和垂直对齐属性。 text-align属性设置水平对齐方式，向左，右，或中心： 实例 td { text-align:right; }
垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
td
{
height:50px;
vertical-align:bottom;
}
表格填充 如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性： 实例
td
{
padding:15px;
}
表格颜色 下面的例子指定边框的颜色，和th元素的文本和背景颜色： 实例
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
table-layout： 设置或检索表格的布局算法
border-spacing： 设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距（类似属性的cellspacing）
caption-side： 设置或检索表格的caption对象是在表格的那一边
empty-cells: 设置或检索当表格的单元格无内容时，是否显示该单元格的边框
再給你們舉個小例子哦：
HTML 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th></th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleAdd(index)">+</button>
{{item.count}}
<button @click="handleReduce(index)" :disabled="item.count===1">-</button>
</td>
<td><button @click="handleRemove(index)">移除</button></td>
</tr>
</tbody>
</table>
<div>总价： ￥ {{totalPrice}}</div>
</template>
<div v-else>购物车为空</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
CSS 部分
[v-cloak]{
display: none;
}
table{
border:1px solid #e9e9e9;
/* border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 */
border-collapse: collapse;
/* cellspacing单元格和单元格之间的空白 */
/* 与border-spacing类似 cellspacing单元格和单元格之间的空白 */
border-spacing: 0;
/* 设置或检索当表格的单元格无内容时，是否显示该单元格的边框 */
empty-cells: show;
}
th,td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th{
background: #f7f7f7;
color: #5c6b77;
font-weight: 600;
white-space: nowrap;
}
JS 部分
let vue = new Vue({
el: "#app",
computed: {
totalPrice:function(){
var total = 0 ;
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
total += item.price * item.count;
}
return total.toString().replace(/\B(?=(\d{3}) + $)/g,','); // 将结果转化为带有千位分隔符的数字,
},
},
data() {
return {
list: [
{
id: 1,
name: 'iPhone7',
price: 6188,
count: 1,
},
{
id: 2,
name: 'iPad Pro',
price: 5188,
count: 2,
},
{
id: 3,
name: 'MacBook Pro',
price: 21488,
count: 5,
},
]
}
},
methods: {
handleAdd:function(i){
this.list[i].count++
},
handleReduce:function(i){
if(this.list[i].count === 1) return;
this.list[i].count--
},
handleRemove:function(i){
this.list.splice(i,1)
}
},
mounted() {
},
})
