Resizable dynamic table in HTML

Question

Resizable dynamic table in HTML

I am currently developing a flex table in HTML, constructed of multiple div elements. My goal is to make it resizable without using the traditional table tag. The layout of my table is similar to the one showcased in the following link. How can I achieve this using div elements exclusively?

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

Explore the sample here for guidance.

javascript jquery html css

Answer 1

Answer №1

Check out this neat solution:

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

Answer 2

Check out this neat solution:

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

Resizable dynamic table in HTML

Answer №1

Similar questions

The max-width CSS property is failing to function properly on a specific DIV element

How can we send a JSONArray through a dynamically generated button event and then retrieve the elements of the JSONArray?

What is the best way to pass properties of a class instance to the super constructor of its parent?

CSS clearfix doesn't appear to be functioning properly

CSS Hack: Changing a Single Value with HSL Color Palette

Selenium can locate an element by its CSS selector that comes after a specific element

Failure to display a base64 image retrieved from an asynchronous AJAX request

Make sure the "Position Sticky" property has the same impact on nested children elements as

Incapable of composing text using the MUI SearchBar

Reload the text content of a locally hosted webpage within an iframe at regular intervals

Incorporating Selenium Python to display text results in a single-line format for enhanced output presentation

displaying a confirmation using jQuery in CodeIgniter

What is the process to obtain the child theme URL in WordPress?

Exploring label-value pairs and extracting values using Jquery

Having trouble adding an image link to the navbar using bootstrap?

Seeking a proficient Cloud Code specialist skilled in JavaScript, focused on managing installations and channels

Can a CSS class be added to a form_row in Symfony 4 Twig?

Tips for closing two nested Material-UI popovers when a button is clicked or when clicked elsewhere

How can I create a basic jQuery validation that only applies to the border and background without affecting the text?

Exploring Javascript's Standard Object: A Guide to Retrieving Two Elements