Today, I needed to realize the function of the topic when I completed a function. After setting the height of Tbody for a long time, I did not see the effect. Finally, I added a div outside the table to solve the problem. The code is as follows:

<! DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, <link rel="stylesheet" href="./ CSS /template1fixed. CSS "> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="./iconfont/iconfont.css"> <script src="./iconfont/iconfont.js"></script> <script src='js/vue.js'></script> <script src="js/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="./easyui/jquery.easyui.min.js"></script> </head> <body> <div id='app'> <div class="container"> <! <div class="left"> <! <table class="table"> <thead class="thead"> <tr> <th> Time </th> <th> Theme </th> <th> speaker </th> <th> reservation person </th> </tr> </thead> <tbody class="tbody1"> <tr class="tr1" v-for="(item,index) in MeetingMessage" :key="index"> <td>{{item.time}}</td> <td>{{item.title}}</td> <td>{{item.compere}}</td> <td>{{item.reserve}}</td> </tr> <tr class="tr2"> <td colspan="4"> &nbsp; </td> </tr> </tbody> </table> </div> <div class="table2"> <table class="table"> <tbody class="tbody2"> <! <tr> <td colspan="4" class="announcement" style="border-top: 1px solid #4694A8;" > <p>{{announcementData[0]}}</p> </td> </tr> <! - horizontal - > < tr > < td colspan = "4" class = "line" > < span > < / span > < / td > < / tr > <! <tr class="timeAndWeather"> < TD class="week"> <span class="day">{{date.week}}</span> <span class="time">{{date.time}}</span> </td> <td class="weather" colspan="3"> <div class="divWeather"> <span class="city"> {{weather.city}} </span> <span class="temperature">{{weather.temperature}}</span> <div class="probability"> <span class="icon iconfont">&#xe790; </span> <span class="num">{{weather.probability}}</span> </div> <div class="windSpeed"> <span class="icon iconfont">&#xe610; </span> <span class="num">{{weather.windSpeed}}</span> </div> </div> </td> </tr> </tbody> </table> </div> </div> <! -- table end --> <! <div class="right"> <! --> <div class="meetingTitle"> <p class="title1">{{meetingtitle1}}</p> <p class="title2">{{meetingTitle.title2}}</p> </div> </div> </div> </div> <script> const app = new Vue({ el: '#app', data: {MeetingMessage: [{time: '08:00-09:00', title: 'technical communication ', compere:' jz3-09:00 ', reserve: 'Jz3-09:00'}, {time: '08:00-09:00', title: Compere: 'jz3 ', reserve:' jz3 '}, {time: '08:00-09:00', title: 'jz3 ', compere:' jz3 ', reserve: 'jz4'}, {time: {time: '08:00-09:00', title: '08:00-09:00', compere: '08:00-09:00', title: '08:00-09:00', compere: '08:00-09:00' 'Joe' reserve: 'bill'}, {time: '08:00-09:00, title:' technical exchanges, compere: 'zhang' reserve: 'bill'}, {time: {time: '08:00-09:00', title: '08:00-09:00', compere: '08:00-09:00', title: '08:00-09:00', compere: '08:00-09:00' AnnouncementData: {time: '08:00-09:00', title: 'information ', compere:' information ', reserve: 'information'}, {time: '08:00-09:00', title: 'information ', reserve:' information '], announcementData: [' Announcement: First Meeting on How to Raise National Income '], date: {week: ", time: "}, weather: {city: 'Chengdu ', temperature: '30℃', probability: '96%', windSpeed: '14km/h'}, meetingTitle: {title1: 'Test conference ', Title2:' On raising people's income, committed to the development of people's livelihood '}}, methods: { dateFormat(fmt, date) { let ret; Const opt = {" Y + ": the date getFullYear (), toString ()," m + ": / / year (date, getMonth () + 1). The toString (), / /" d + ": Date. GetDate (). The toString (), / / day "H +" : the date. The getHours (), toString (), / / "M +" : the date. The getMinutes (). The toString (), / / min "S +" : Date.getseconds ().toString(), // second, "week": date.getday () + 0 switch (opt.week) { case 0: this.date.week = "SUb"; break; case 1: this.date.week = "Mon"; break; case 2: this.date.week = "Tue"; break; case 3: this.date.week = "Wed"; break; case 4: this.date.week = "Thur"; break; case 5: this.date.week = "Fri"; break; case 6: this.date.week = "Sat"; break; } for (let k in opt) { ret = new RegExp("(" + k + ")").exec(fmt); if (ret) { fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0"))) }; }; return fmt; }, }, created() { setInterval(() => { let date = new Date(); let nowTime = this.dateFormat("HH:MM", date); this.date.time = nowTime; }, 1000); }, components: {} }); </script> </body> </html>Copy the code

CSS:

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
li {
  list-style: none;
}
#app {
  width: 100%;
  height: 100%;
}
#app .container {
  width: 100%;
  height: 100%;
  display: flex;
}
#app .container .left {
  flex: 4;
}
#app .container .left .table1 {
  height: 460px;
  overflow: auto;
}
#app .container .left .table1 .table .thead {
  background-color: #4694A8;
  color: #fff;
}
#app .container .left .table1 .table .thead tr th {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 4px;
  text-align: center;
}
#app .container .left .table1 .table .tbody1 {
  height: 300px;
}
#app .container .left .table1 .table .tbody1 .tr1 td {
  border-bottom: 1px solid #4694A8;
  letter-spacing: 2px;
  font-size: 20px;
  color: #4694A8;
  text-align: center;
  padding: 15px 0;
}
#app .container .left .table1 .table .tbody1 .tr2 td {
  border-bottom: 1px solid #4694A8;
  letter-spacing: 2px;
  font-size: 20px;
  color: #4694A8;
  text-align: center;
  padding: 15px;
}
#app .container .left .table2 {
  border-top: none;
  margin-top: 18px;
}
#app .container .left .table2 .tbody2 {
  border-top: 1px solid #4694A8;
}
#app .container .left .table2 .tbody2 .announcement p {
  background-color: #4694A8;
  border-radius: 30px;
  color: #fff;
  padding: 15px 0;
  margin-top: 10px;
  text-align: center;
  font-size: 20px;
}
#app .container .left .table2 .tbody2 .line {
  border-top: none;
  border-bottom: none;
  text-align: center;
  padding-top: 20px ;
  padding-bottom: 20px ;
}
#app .container .left .table2 .tbody2 .line span {
  display: inline-block;
  width: 80%;
  border-radius: 15px;
  height: 5px;
  background-color: #4694A8;
}
#app .container .left .table2 .tbody2 .timeAndWeather {
  background-color: #4694A8;
}
#app .container .left .table2 .tbody2 .timeAndWeather .week {
  padding: 15px;
  display: flex;
  flex-direction: column;
  color: #fff;
  border-right: 5px solid #B5D4DC;
}
#app .container .left .table2 .tbody2 .timeAndWeather .week .day {
  font-size: 40px;
}
#app .container .left .table2 .tbody2 .timeAndWeather .week .time {
  font-size: 27px;
}
#app .container .left .table2 .tbody2 .timeAndWeather .weather {
  color: #fff;
}
#app .container .left .table2 .tbody2 .timeAndWeather .weather .divWeather {
  display: flex;
  justify-content: space-around;
}
#app .container .left .table2 .tbody2 .timeAndWeather .weather .divWeather .city {
  margin-top: 5px;
  font-size: 50px;
}
#app .container .left .table2 .tbody2 .timeAndWeather .weather .divWeather .temperature {
  margin-top: 35px;
  font-size: 35px;
}
#app .container .left .table2 .tbody2 .timeAndWeather .weather .divWeather .probability {
  margin-top: 35px;
  font-size: 35px;
}
#app .container .left .table2 .tbody2 .timeAndWeather .weather .divWeather .probability .iconfont {
  font-size: 20px;
}
#app .container .left .table2 .tbody2 .timeAndWeather .weather .divWeather .windSpeed {
  margin-top: 35px;
  font-size: 35px;
}
#app .container .left .table2 .tbody2 .timeAndWeather .weather .divWeather .windSpeed .iconfont {
  font-size: 20px;
}
#app .container .right {
  flex: 5;
  background-image: url('.. /images/background.jpg');
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
#app .container .right .meetingTitle {
  width: 80%;
  background-color: #4694A8;
  padding: 50px;
  border-radius: 20px;
  opacity: 0.9;
  filter: alpha(opacity=90);
  /* IE8 and earlier */
}
#app .container .right .meetingTitle .title1 {
  letter-spacing: 5px;
  font-size: 35px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
#app .container .right .meetingTitle .title2 {
  letter-spacing: 5px;
  font-size: 20px;
  color: #fff;
  text-align: center;
}

Copy the code

Final effect: