HTML table height and width not reflecting CSS

Question

I specified my HTML table to have a min-height: 50% and min-width: 60%, but as you can see my table size does not reflect this. It seems to have sized to be just big enough to contain its child element. Can someone explain why this behavior occurs when I expect my table to the specified height and width?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Tahoma, Geneva, Verdana, sans-serif;
}

#wrapper {
  border: 3px solid black;
  height: 100vh;
  width: 100vw;
}

.table {
  border: 3px solid red;
  min-height: 50%;
  min-width: 60%;
  margin: 10% auto;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="wrapper">
      <table class="table">
        <thead>
          <tr>
            <th>name</th>
            <th>age</th>
            <th>grade</th>
            <th>percentage</th>
            <th>passing</th>
            <th>notes</th>
          </tr>
        </thead>
      </table>
    </div>
  </body>
</html>

Does this answer your question? [CSS display: table min-height not working](https://stackoverflow.com/questions/7790222/css-display-table-min-height-not-working) — Taplar, Dec 10 '20 at 23:40
no, because I tried using {height: 50%; width: 60%} as well and it still doesn't work — askingstupidquestions, Dec 10 '20 at 23:46

score 0 · Answer 1 · answered Dec 11 '20 at 00:05

0

Setting display: block; on the table-class should do the trick. Although you might want to then set max values for the width and height as well (or just use width and height).

answered Dec 11 '20 at 00:05

plc-dev

45
1
5

I think this is not a good way to use
– Chuong Tran Dec 11 '20 at 04:25

Xhulian · Answer 2 · 2020-12-11T01:29:26.187

Just add this

<tbody>
    <tr></tr>
</tbody>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

#wrapper {
    border: 3px solid black;
    height: 100vh;
    width: 100vw;
}

.table {
    border: 3px solid red;
    min-height: 50%;
    min-width: 60%;
    margin: 10% auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div id="wrapper">
        <table class="table">
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                    <th>grade</th>
                    <th>percentage</th>
                    <th>passing</th>
                    <th>notes</th>
                </tr>
            </thead>
            <tbody>
                <tr></tr>
            </tbody>
        </table>
    </div>
</body>

</html>

It's interesting, when you only have thead in the table, it doesn't apply the styles correctly. If you remove the thead tag it works or if you add an empty tr inside tbody.

So, if you use thead you must use tbody

HTML table height and width not reflecting CSS

2 Answers2