今天在完成一个功能的时候需要实现题目这个功能，设置了半天的tbody的高度也没看见效果，最终我是给table外面加了一个div来解决的。 代码如下： html：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>模板1</title>
<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表单 -->
<div class="table1">
<table class="table">
<thead class="thead">
<tr>
<th>时间</th>
<th>主题</th>
<th>主讲人</th>
<th>预订人</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">
</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>
<!-- 横线 -->
<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"></span>
<span class="num">{{weather.probability}}</span>
</div>
<div class="windSpeed">
<span class="icon iconfont"></span>
<span class="num">{{weather.windSpeed}}</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- table表单结束 -->
<!-- 右侧区域 -->
<div class="right">
<!-- 会议主题 -->
<div class="meetingTitle">
<p class="title1">{{meetingTitle.title1}}</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: '技术交流',
compere: '张三',
reserve: '李四'
}, {
time: '08:00-09:00',
title: '技术交流',
compere: '张三',
reserve: '李四'
}, {
time: '08:00-09:00',
title: '技术交流',
compere: '张三',
reserve: '李四'
}, {
time: '08:00-09:00',
title: '技术交流',
compere: '张三',
reserve: '李四'
}, {
time: '08:00-09:00',
title: '技术交流',
compere: '张三',
reserve: '李四'
}, {
time: '08:00-09:00',
title: '技术交流',
compere: '张三',
reserve: '李四'
}, {
time: '08:00-09:00',
title: '技术交流',
compere: '张三',
reserve: '李四'
}, {
time: '08:00-09:00',
title: '技术交流',
compere: '张三',
reserve: '李四'
}, {
time: '08:00-09:00',
title: '技术交流',
compere: '张三',
reserve: '李四'
}],
announcementData: ['公告：关于如何提高国民收入第一次会议'],
date: {
week: '',
time: ''
},
weather: {
city: '成都',
temperature: '30℃',
probability: '96%',
windSpeed: '14km/h'
},
meetingTitle: {
title1: '测试会议',
title2: '关于人民收入提高，致力于民生发展'
}
},
methods: {
dateFormat(fmt, date) {
let ret;
const opt = {
"Y+": date.getFullYear().toString(), // 年
"m+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"M+": date.getMinutes().toString(), // 分
"S+": date.getSeconds().toString(), // 秒,
"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>
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 及更早版本 */
}
#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;
}
最终效果图：
