老衲as用飘柔 2022-08-13 08:54 采纳率: 100%
浏览 210
已结题

如何给table表格添加边框

img


请问一下,如何给这个table表格添加边框属性?


<!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;
      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>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="../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>

  • 写回答

2条回答 默认 最新

  • Z_pigeon 2022-08-13 09:10
    关注
    
    <!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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 8月21日
  • 已采纳回答 8月13日
  • 创建了问题 8月13日

悬赏问题

  • ¥15 快手联盟怎么快速的跑出建立模型
  • ¥15 关于腾讯云服务器中,PHP页面无法打开的问题
  • ¥60 如何把照片修复成原始拍摄图
  • ¥80 Exited too quickly (process log may have details)
  • ¥15 爬知乎登录之后内容加载不出来
  • ¥15 怎么用protues测量通频带
  • ¥15 zepelin使用sparkInterpreter 异常
  • ¥15 paho mqtt 接收不到消息
  • ¥15 函数r关于两个分量y,z方向上的图像,分开画r随y的图像,r随z的图像
  • ¥15 如何用Matlab求Pearcey函数的数值积分?