我是前端的新手，正在使用引导程序，但我真的不知道如何实现这种效果：
我谈到了带表和隐藏div的行。表是100%宽度，当点击按钮后出现隐藏div时，表将调整到60-70%，其余宽度将用于div。当我关闭div(使其隐藏(时，表会返回到100%宽度。
你能帮我理解一下我应该如何用最常见、最正确的方式来做吗？
这里！没有AngularJs。您可以添加一些动画，使其更加流畅。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="script.js"></script>
<style>
body{
margin: 0;
padding: 0;
overflow: hidden;
}
table{
margin: 0;
padding: 0;
background: grey;
float: left;
}
table tr, td, th{
margin: 0;
padding: 0;
}
#divToResize{
width: 0;
height: 100px;
margin: 0;
padding: 0;
background: blue;
float: left;
color: white;
}
</style>
<script>
'use strict';
let resized = false;
function resize(){
if (resized === false){
document.getElementById("tableToResize").style.width = "60%";
document.getElementById('divToResize').style.width = "40%";
resized = true;
} else{
document.getElementById("tableToResize").style.width = "100%";
document.getElementById('divToResize').style.width = "0";
resized = false;
}
}
</script>
</head>
<body>
<div id="container">
<table cellpadding="0" style="width: 100%;" id="tableToResize">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr><tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr><tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr><tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</table>
<div id="divToResize">
I love Food
</div>
<button onclick="resize()">Resize</button></div>
</body>
</html>
Angular提供了许多内置指令，用于有条件/动态地操作CSS样式-例如，ng class-在CSS样式集为静态/提前已知时使用
点击后，以下是更改表格单元格宽度的简单方法：
<button ng-hide="click" ng-click="click = true">click</button>
<button ng-hide="!click" ng-click="click = false">click</button>
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in data">
<td >
{{data.person}}
</td>
<td style="background:grey" ng-class="{after_click_width: click}">
{{data.person}}
</td>
</tr>
</tbody>
</table>
样式：
.after_click_width {
width: 70%
}
工作柱塞：http://plnkr.co/edit/DuxbZFZbUpjU2BSLlpm2?p=preview