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>
2 answers
solution1
0 2020-12-11 00:05:05
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).
solution2
0 2020-12-11 00:46:10
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.