console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中间自适应</title>
</head>
<div class="box">
<div class="left">left</div>
<div class="mid">mid</div>
<div class="right">right</div>
</div>
<div class="table">
<table>
<tr>
<td class="table-left">left</td>
<td class="table-mid">mid</td>
<td class="table-right">right</td>
</tr>
</table>
</div>
body {
box-sizing: border-box;
font-size: 30px;
text-align: center;
}
.box {
display: flex;
width: 100%;
height: 50px;
}
.left {
width: 200px;
background-color: yellow;
}
.mid {
flex:1;
background-color: lime;
}
.right {
width: 200px;
background-color: red;
}
table {
margin-top: 20px;
height: 50px;
border-collapse: collapse;
width: 100%;
}
.table-left {
width: 200px;
background-color: pink;
}
.table-mid {
background-color: lime;
}
.table-right {
background-color: blue;
width: 200px;
}