Гибкий стол большого размера в HTML

Question

Я работаю над таблицей flex в HTML, созданной из нескольких 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>

https://codepen.io/Neizan/pen/XWJbVQY

Answer 1

Вот один из способов сделать это:

*{
  box-sizing:border-box; margin:0; padding:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc; padding:7px;
}
.container>h2{
  background:#000; color:#fff; padding:3px 10px;
}
.flex{
  background:#fff; font-size:16px; display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
}
.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; padding:3px 5px;
}
.flex>div:nth-child(5n+1){
  width:20px; border-left:1px solid #000;
}
.flex>div:first-child,.flex>div:first-child+div,.flex>div:first-child+div+div,.flex>div:first-child+div+div+div,.flex>div:first-child+div+div+div+div{
  font-weight:bold; border-top:1px solid #000;
}

<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>