OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Static table height, dynamic rows height and min-height

  • Thread starter Thread starter Dano
  • Start date Start date
D

Dano

Guest
What I'm trying to achieve is to have a table with a static height, but table rows with a dynamic height and min-height.

For example, I have a table with 5 rows, each row has a different amount of data. If a row is empty and all the others are full, I want the empty one to shrink to a specified min-height, while the others stretch as much as they need (the table will be scrollable if it exceeds its height, so overflow: auto). But if the table is fully empty, I want it to keep its static height while having all the table rows stretched out so it fits nicely.

Now, I am aware the you can't use min-height in table cells, I'm just looking for something that has the same effect.

This is what I'm currently doing.

This is what I'm trying to achieve.

(I'll only have 1 table, there's 3 here to showcase multiple scenarios)


Code:
table {
  width: 250px;
  height: 300px;
  border-style: solid;
  border-color: black;
  border-width: 0 2px 2px 0;
  float: left;
  table-layout: fixed;
  overflow: auto;
  display: inline-block;
  background-color: lightgray;
  border-spacing: 0;
  margin: 20px;
}

thead tr {
  border: 2px solid black;
}

table thead th {
  border-top: 2px solid black;
  border-left: 2px solid black;
  background-color: gray;
  height: 20px;
}

table thead tr th:nth-child(1){
  max-width: 15%;
  width: 15%;
}
table thead tr th:nth-child(2){
  max-width: 15%;
  width: 15%;
}
table thead tr th:nth-child(3){
  max-width: 20%;
  width: 20%;
}
table thead tr th:nth-child(4){
  max-width: 20%;
  width: 20%;
}

table td {
  border-top: 2px solid black;
  border-left: 2px solid black;
  height: 20px;
}

Code:
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>dynamic row height and min height</title>
  </head>
  <body>
        <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Info</th>
          <th>Descripion</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div>001</div>
            <div>002</div>
            <div>003</div>
            <div>004</div>
          </td>
          <td>
            <div>1N</div>
            <div>2N</div>
            <div>3N</div>
            <div>4N</div>
          </td>
          <td>
            <div>1info</div>
            <div>2info</div>
            <div>3info</div>
            <div>4info</div>
          </td>
          <td>
            <div>1desc</div>
            <div>2desc</div>
            <div>3desc</div>
            <div>4desc</div>
          </td>
        </tr>
        <tr>
          <td>
            <div>005</div>
            <div>006</div>
            </td>
          <td>
            <div>5N</div>
            <div>6N</div>
          </td>
          <td>
            <div>5info</div>
            <div>6info</div>
          </td>
          <td>
            <div>5desc</div>
            <div>6desc</div>
          </td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>
            <div>007</div>
            <div>008</div>
            <div>009</div>
            <div>010</div>
            <div>011</div>
            <div>012</div>
            <div>013</div>
          </td>
          <td>
            <div>7N</div>
            <div>8N</div>
            <div>9N</div>
            <div>10N</div>
            <div>11N</div>
            <div>12N</div>
            <div>13N</div>
          </td>
          <td>
            <div>7info</div>
            <div>8info</div>
            <div>9info</div>
            <div>10info</div>
            <div>11info</div>
            <div>12info</div>
            <div>13info</div>
          </td>
          <td>
            <div>7desc</div>
            <div>8desc</div>
            <div>9desc</div>
            <div>10desc</div>
            <div>11desc</div>
            <div>12desc</div>
            <div>13desc</div>
          </td>
        </tr>
        <tr>
          <td>
            <div>014</div>
            <div>015</div>
            <div>016</div>
            <div>017</div>
          </td>
          <td>
            <div>14N</div>
            <div>15N</div>
            <div>16N</div>
            <div>17N</div>
          </td>
          <td>
            <div>14info</div>
            <div>15info</div>
            <div>16info</div>
            <div>17info</div>
          </td>
          <td>
            <div>14desc</div>
            <div>15desc</div>
            <div>16desc</div>
            <div>17desc</div>
          </td>
        </tr>
      </tbody>
    </table>

    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Info</th>
          <th>Descripion</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div>001</div>
            <div>002</div>
            <div>003</div>
          </td>
          <td>
            <div>1N</div>
            <div>2N</div>
            <div>3N</div>
          </td>
          <td>
            <div>1info</div>
            <div>2info</div>
            <div>3info</div>
          </td>
          <td>
            <div>1desc</div>
            <div>2desc</div>
            <div>3desc</div>
          </td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>
            <div>007</div>
            <div>008</div>
            <div>009</div>
            <div>010</div>
          </td>
          <td>
            <div>7N</div>
            <div>8N</div>
            <div>9N</div>
            <div>10N</div>
          </td>
          <td>
            <div>7info</div>
            <div>8info</div>
            <div>9info</div>
            <div>10info</div>
          </td>
          <td>
            <div>7desc</div>
            <div>8desc</div>
            <div>9desc</div>
            <div>10desc</div
          </td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>

    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Info</th>
          <th>Descripion</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Tried using a wrapper, as that would supposedly allow me to set min-height and height, but that resulted in basically the same thing I have now.

I've also tried playing around with heights, overflows and other css attributes in different tags, but the best result I managed to get is the code shown in the question.

EDIT: A wrapper (for the entire table) did in fact work. I don't know what I did wrong the first few times I tried, but I wrapped the whole table in a div, give it the required width/height and overflow: auto, then changed the table's display to table, which resulted in what I needed.

Snippet here: https://jsfiddle.net/3u0x84t2/9/
<p>What I'm trying to achieve is to have a table with a <strong>static height</strong>, but table rows with a <strong>dynamic height</strong> and <code>min-height</code>.</p>
<p>For example, I have a table with 5 rows, each row has a different amount of data. If a row is empty and all the others are full, I want the empty one to shrink to a specified <code>min-height</code>, while the others stretch as much as they need (the table will be scrollable if it exceeds its <strong>height</strong>, so <code>overflow: auto</code>). But if the table is fully empty, I want it to keep its <strong>static height</strong> while having all the table rows stretched out so it fits nicely.</p>
<p>Now, I am aware the you can't use <code>min-height</code> in table cells, I'm just looking for something that has the same effect.</p>
<p><a href="https://jsfiddle.net/b0zhg5ye/3/" rel="nofollow noreferrer">This </a>is what I'm currently doing.</p>
<p><a href="https://jsfiddle.net/43vtL5nw/2/" rel="nofollow noreferrer">This </a>is what I'm trying to achieve.</p>
<p><strong>(I'll only have 1 table, there's 3 here to showcase multiple scenarios)</strong></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table {
width: 250px;
height: 300px;
border-style: solid;
border-color: black;
border-width: 0 2px 2px 0;
float: left;
table-layout: fixed;
overflow: auto;
display: inline-block;
background-color: lightgray;
border-spacing: 0;
margin: 20px;
}

thead tr {
border: 2px solid black;
}

table thead th {
border-top: 2px solid black;
border-left: 2px solid black;
background-color: gray;
height: 20px;
}

table thead tr th:nth-child(1){
max-width: 15%;
width: 15%;
}
table thead tr th:nth-child(2){
max-width: 15%;
width: 15%;
}
table thead tr th:nth-child(3){
max-width: 20%;
width: 20%;
}
table thead tr th:nth-child(4){
max-width: 20%;
width: 20%;
}

table td {
border-top: 2px solid black;
border-left: 2px solid black;
height: 20px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>dynamic row height and min height</title>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Info</th>
<th>Descripion</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>001</div>
<div>002</div>
<div>003</div>
<div>004</div>
</td>
<td>
<div>1N</div>
<div>2N</div>
<div>3N</div>
<div>4N</div>
</td>
<td>
<div>1info</div>
<div>2info</div>
<div>3info</div>
<div>4info</div>
</td>
<td>
<div>1desc</div>
<div>2desc</div>
<div>3desc</div>
<div>4desc</div>
</td>
</tr>
<tr>
<td>
<div>005</div>
<div>006</div>
</td>
<td>
<div>5N</div>
<div>6N</div>
</td>
<td>
<div>5info</div>
<div>6info</div>
</td>
<td>
<div>5desc</div>
<div>6desc</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div>007</div>
<div>008</div>
<div>009</div>
<div>010</div>
<div>011</div>
<div>012</div>
<div>013</div>
</td>
<td>
<div>7N</div>
<div>8N</div>
<div>9N</div>
<div>10N</div>
<div>11N</div>
<div>12N</div>
<div>13N</div>
</td>
<td>
<div>7info</div>
<div>8info</div>
<div>9info</div>
<div>10info</div>
<div>11info</div>
<div>12info</div>
<div>13info</div>
</td>
<td>
<div>7desc</div>
<div>8desc</div>
<div>9desc</div>
<div>10desc</div>
<div>11desc</div>
<div>12desc</div>
<div>13desc</div>
</td>
</tr>
<tr>
<td>
<div>014</div>
<div>015</div>
<div>016</div>
<div>017</div>
</td>
<td>
<div>14N</div>
<div>15N</div>
<div>16N</div>
<div>17N</div>
</td>
<td>
<div>14info</div>
<div>15info</div>
<div>16info</div>
<div>17info</div>
</td>
<td>
<div>14desc</div>
<div>15desc</div>
<div>16desc</div>
<div>17desc</div>
</td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Info</th>
<th>Descripion</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>001</div>
<div>002</div>
<div>003</div>
</td>
<td>
<div>1N</div>
<div>2N</div>
<div>3N</div>
</td>
<td>
<div>1info</div>
<div>2info</div>
<div>3info</div>
</td>
<td>
<div>1desc</div>
<div>2desc</div>
<div>3desc</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div>007</div>
<div>008</div>
<div>009</div>
<div>010</div>
</td>
<td>
<div>7N</div>
<div>8N</div>
<div>9N</div>
<div>10N</div>
</td>
<td>
<div>7info</div>
<div>8info</div>
<div>9info</div>
<div>10info</div>
</td>
<td>
<div>7desc</div>
<div>8desc</div>
<div>9desc</div>
<div>10desc</div
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Info</th>
<th>Descripion</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html></code></pre>
</div>
</div>
</p>
<p>Tried using a wrapper, as that would supposedly allow me to set <code>min-height</code> and <code>height</code>, but that resulted in basically the same thing I have now.</p>
<p>I've also tried playing around with <code>heights</code>, <code>overflows</code> and other css attributes in different tags, but the best result I managed to get is the code shown in the question.</p>
<p><strong>EDIT:</strong> A wrapper (for the entire table) did in fact work. I don't know what I did wrong the first few times I tried, but I wrapped the whole table in a div, give it the required width/height and overflow: auto, then changed the table's display to table, which resulted in what I needed.</p>
<p>Snippet here: <a href="https://jsfiddle.net/3u0x84t2/9/" rel="nofollow noreferrer">https://jsfiddle.net/3u0x84t2/9/</a></p>
Continue reading...
 

Latest posts

Online statistics

Members online
0
Guests online
2
Total visitors
2
Ads by Eonads
Top