问题描述：

我正在处理HTML中的flex表，它是由多个div创建的。我正在尝试将其调整大小。我的桌子的布局与下面提到的链接类似。如何在不使用表格标签的情况下使用多个div实现此目标？

<div class="container">
  <h2>Resizable Columns</h2>
  <table class="table table-bordered" data-resizable-columns-id="demo-table-v2">
    <thead>
      <tr>
        <th data-resizable-column-id="nr">#</th>
        <th data-resizable-column-id="first_name">First Name</th>
        <th data-resizable-column-id="nickname">Nickname</th>
        <th data-resizable-column-id="last_name">Last Name</th>
        <th data-resizable-column-id="username" id="username-column">Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Dude Meister</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Barney von Matterhorn</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td colspan="2">Larry the Bird</td>
        <td>What</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
  </diu>

解决方法：

这里是一种方法：

*{   box-sizing:border-box; margin:0; padding:0; } html,body,.container{   width:100%; height:100%; } .flex{   display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; border-top:1px solid #000; } .flex>div{   display:flex; border:1px solid #000; width:calc(25% - 5px); justify-content:center; align-items:center; text-align:center; border-top:0; border-left:0; } .flex>div:nth-child(5n+1){   width:20px; border-left:1px solid #000; } .flex>div{ }

<div class='container'>   <h2>Resizable Columns</h2>   <div class='flex'>     <div>#</div>     <div>First Name</div>     <div>Nickname</div>     <div>Last Name</div>     <div>Username</div>     <div>1</div>     <div>Mark</div>     <div>Dude Meister</div>     <div>Otto</div>     <div>@mdo</div>     <div>2</div>     <div>Jacob</div>     <div>Barney von Matterhorn</div>     <div>Thornton</div>     <div>@fat</div>     <div>3</div>     <div>Larry the Bird</div>     <div></div>     <div>What</div>     <div>@twitter</div> </div>

未经允许不得转载：编程自学网 » HTML中可调整大小的flex表