CODEWITHSUNDEEP
htmlcss
user3014233
user3014233

Reputation:

CSS: How to set minimum and maximum height according to inside?

Suppose I have a table with 100vh height, how to set minimum height for thead according to inside and maximum tbody?

<table style="height: 100vh;">
    <thead>...</thead>
    <tbody>...</tbody>
</table>

enter image description here

Upvotes: 1

Views: 261

Answers (2)

Asons
Asons

Reputation: 87303

Is this what you look for?

Updated

Did a few tests and noticed giving height to the body didn't work properly cross browser, which below update does (tested on Chrome, Firefox, Edge, IE11)

html, body {
  margin: 0;
}
table {
  width: 100%;
  height: 100vh;
}
table thead tr {
  height: 80px;      /*  on table elements, height works kind of like min-height  */
  background: yellow;
}
table tbody tr {
  background: lime;
}
<table>
  <thead>
    <tr>
      <td>
        HEAD<br>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        BODY
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Md Rafee
Md Rafee

Reputation: 5550

you can follow the hack to achieve your goal. Use least height for thead, but not 0.Use 0% for tbody

html,body{
  margin:0;
  }
table{
  width:100%;
  height: 100vh;
  border: 1px solid black;
}
thead{
  background: red;
  height:1px;
}
tbody{
  background: blue;
  height:0%;
}
<table>
    <thead>
      <tr>
        <td colspan="4">
          <img src="http://dummyimage.com/100x100/eb00eb/fff">
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>BODY</td>
        <td>BODY</td>
        <td>BODY</td>
        <td>BODY</td>
      </tr>
    </tbody>
  </table>

Upvotes: 0

Related Questions