如何给table表格添加边框
请问一下,如何给这个table表格添加边框属性?
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>table表格效果title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
h3 {
text-align: center;
margin-top: 10px;
padding-bottom: 20px;
border-bottom: 2px solid #ccc;
}
input {
height: 30px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
}
.box {
width: 100%;
height: 80px;
border-bottom: 2px solid #ccc
}
ul {
margin-left: 400px;
}
ul li {
float: left;
margin: 20px 20px 0 0;
}
.search {
float: right;
margin-top: 20px;
margin-right: 70px;
}
table {
margin: 50px auto;
height: 100%;
border: 1px solid #333;
border-spacing: 0;
border-collapse: collapse;
/* border-radius: 10px ; */
border-collapse: separate;
border-radius: 10px;
border-spacing: 0;
}
th {
border: 1px solid #333;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 80px;
height: 50px;
background-color: bisque;
}
td {
width: 100px;
height: 100%;
/* line-height: 10px; */
text-align: center;
padding: 5px;
border: 1px solid #333;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.footer {
font-size: 20px;
margin-left: 20px;
}
.th-time {
width: 200px;
height: 100%;
}
.txt {
/* display: block; */
margin-bottom: 5px;
width: 30px;
text-align: center;
}
.td {
height: 50px;
}
.allSelect {}
.add {
width: 50px;
height: 30px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
margin-left: 5px;
}
style>
head>
<body>
<div id="app">
<h3>表格效果h3>
<div class="box">
<ul>
<li>
<span>id:span>
<input type="text" v-model.trim.number="id">
li>
<li>
<span>姓名:span>
<input type="text" v-model.trim="name">
li>
<li>
<span>数量:span>
<input type="text" v-model.trim.number="num">
<button @click="addUser" class="add">添加button>
li>
ul>
<div>
<input class="search" type="text" v-model="searchName">
div>
div>
<table cellspacing="0" cellpadding="0">
<tr>
<th><input type="checkbox" v-model="AllCheck" class="allSelect">全选th>
<th>idth>
<th>姓名th>
<th>数量th>
<th class="th-time">时间th>
<th>操作th>
tr>
<tr v-for="item in filterName" :key="item.id">
<td><input type="checkbox" v-model="item.isChecked">td>
<td>{{item.id}}td>
<td>{{item.name}}td>
<td class="td">
<span v-if="!item.isIptShow" @click="item.isIptShow = !item.isIptShow">{{item.num}}span>
<input @blur="item.isIptShow = !item.isIptShow" type="text" v-model.trim.number="item.num" class="txt" v-else>
td>
<td>{{item.time}}td>
<td>
<a href="#" @click=removeUser(item)>删除a>
td>
tr>
table>
<hr>
<div class="footer">
总计:{{total}}
div>
div>
<script src="../lib/lib/vue.js">script>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
user: [
{
id: 1,
isChecked: false,
name: '张三',
isIptShow: false,
num: 10,
time: new Date().toLocaleString()
},
{
id: 2,
isChecked: false,
name: '李四',
isIptShow: false,
num: 10,
time: new Date().toLocaleString()
},
{
id: 3,
isChecked: false,
name: '王五',
isIptShow: false,
num: 10,
time: new Date().toLocaleString()
},
{
id: 4,
isChecked: false,
name: '赵六',
isIptShow: false,
num: 10,
time: new Date().toLocaleString()
},
],
id: '',
name: '',
num: '',
searchName: ''
}
},
methods: {
// 添加用户
addUser() {
// 判断添加的数据是否重复
if (!this.name || !this.id || !this.num) {
alert("选项不能为空");
return;
};
if (this.user.some(el => el.id == this.id)) {
alert('id不能重复');
return;
}
var obj = {
id: this.id,
isChecked: false,
name: this.name,
isIptShow: false,
num: this.num,
time: new Date().toLocaleString()
}
this.user.push(obj);
this.name = this.num = this.id = '';
},
// 删除用户
removeUser(id) {
const index = this.user.findIndex(el => el.id == id);
this.user.splice(index, 1);
}
},
computed: {
// 筛选数据,模糊查询
filterName() {
return this.user.filter(el => el.name.includes(this.searchName))
},
AllCheck: {
get() {
if (this.user.length == 0) {
return false;
} else {
return this.user.every(el => el.isChecked)
}
},
set(value) {
this.user.forEach(el => el.isChecked = value);
}
},
// 总计
total() {
return this.user.reduce((cur, val) => {
if (val.isChecked) {
return cur + val.num
} else {
return 0
}
}, 0)
}
},
})
script>
body>
html>
<!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>table表格效果</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
h3 {
text-align: center;
margin-top: 10px;
padding-bottom: 20px;
border-bottom: 2px solid #ccc;
}
input {
height: 30px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
}
.box {
width: 100%;
height: 80px;
border-bottom: 2px solid #ccc
}
ul {
margin-left: 400px;
}
ul li {
float: left;
margin: 20px 20px 0 0;
}
.search {
float: right;
margin-top: 20px;
margin-right: 70px;
}
table {
margin: 50px auto;
height: 100%;
border: 1px solid #333;
border-spacing: 0;
border-collapse: collapse;
/* border-radius: 10px ; */
border-collapse: separate;
border-radius: 10px;
overflow: hidden;
border-spacing: 0;
}
th {
// border: 1px solid #333;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 80px;
height: 50px;
background-color: bisque;
}
td {
width: 100px;
height: 100%;
/* line-height: 10px; */
text-align: center;
padding: 5px;
// border: 1px solid #333;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.footer {
font-size: 20px;
margin-left: 20px;
}
.th-time {
width: 200px;
height: 100%;
}
.txt {
/* display: block; */
margin-bottom: 5px;
width: 30px;
text-align: center;
}
.td {
height: 50px;
}
.allSelect {}
.add {
width: 50px;
height: 30px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
margin-left: 5px;
}
table tbody tr th:last-child,
table tbody tr td:last-child {
border-right: none;
}
table tbody tr:last-of-type td {
border-bottom: none;
}
</style>
</head>
<body>
<div id="app">
<h3>表格效果</h3>
<div class="box">
<ul>
<li>
<span>id:</span>
<input type="text" v-model.trim.number="id">
</li>
<li>
<span>姓名:</span>
<input type="text" v-model.trim="name">
</li>
<li>
<span>数量:</span>
<input type="text" v-model.trim.number="num">
<button @click="addUser" class="add">添加</button>
</li>
</ul>
<div>
<input class="search" type="text" v-model="searchName">
</div>
</div>
<table cellspacing="0" cellpadding="0">
<tr>
<th><input type="checkbox" v-model="AllCheck" class="allSelect">全选</th>
<th>id</th>
<th>姓名</th>
<th>数量</th>
<th class="th-time">时间</th>
<th>操作</th>
</tr>
<tr v-for="item in filterName" :key="item.id">
<td><input type="checkbox" v-model="item.isChecked"></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td class="td">
<span v-if="!item.isIptShow" @click="item.isIptShow = !item.isIptShow">{{item.num}}</span>
<input @blur="item.isIptShow = !item.isIptShow" type="text" v-model.trim.number="item.num" class="txt" v-else>
</td>
<td>{{item.time}}</td>
<td>
<a href="#" @click=removeUser(item)>删除</a>
</td>
</tr>
</table>
<hr>
<div class="footer">
总计:{{total}}
</div>
</div>
<script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
user: [
{
id: 1,
isChecked: false,
name: '张三',
isIptShow: false,
num: 10,
time: new Date().toLocaleString()
},
{
id: 2,
isChecked: false,
name: '李四',
isIptShow: false,
num: 10,
time: new Date().toLocaleString()
},
{
id: 3,
isChecked: false,
name: '王五',
isIptShow: false,
num: 10,
time: new Date().toLocaleString()
},
{
id: 4,
isChecked: false,
name: '赵六',
isIptShow: false,
num: 10,
time: new Date().toLocaleString()
},
],
id: '',
name: '',
num: '',
searchName: ''
}
},
methods: {
// 添加用户
addUser() {
// 判断添加的数据是否重复
if (!this.name || !this.id || !this.num) {
alert("选项不能为空");
return;
};
if (this.user.some(el => el.id == this.id)) {
alert('id不能重复');
return;
}
var obj = {
id: this.id,
isChecked: false,
name: this.name,
isIptShow: false,
num: this.num,
time: new Date().toLocaleString()
}
this.user.push(obj);
this.name = this.num = this.id = '';
},
// 删除用户
removeUser(id) {
const index = this.user.findIndex(el => el.id == id);
this.user.splice(index, 1);
}
},
computed: {
// 筛选数据,模糊查询
filterName() {
return this.user.filter(el => el.name.includes(this.searchName))
},
AllCheck: {
get() {
if (this.user.length == 0) {
return false;
} else {
return this.user.every(el => el.isChecked)
}
},
set(value) {
this.user.forEach(el => el.isChecked = value);
}
},
// 总计
total() {
return this.user.reduce((cur, val) => {
if (val.isChecked) {
return cur + val.num
} else {
return 0
}
}, 0)
}
},
})
</script>
</body>
</html>