Bootstrap 3和Angular JS - 带表和div的行

Question

我是使用bootstrap的前端的新手，并且无法弄清楚如何实现这种效果：

---

我谈论与表和隐藏div的行。 表格是100％宽度，当单击按钮后出现隐藏div时，表格将调整为60-70％，其余宽度将为div。 当我关闭div（makem it hidden）时，表格将回到100％宽度。

你能帮助我理解我应该如何做到最常见和最正确的方式？

Answer 1

这里！ 没有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>

Answer 2

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