HTML 表格高度和寬度不反映 CSS
[英]HTML table height and width not reflecting CSS
問題描述
我將我的 HTML 表指定為具有min-height: 50%和min-width: 60% ，但正如您所見，我的表大小並未反映這一點。 它的大小似乎剛好足以容納其子元素。 有人可以解釋為什么當我希望我的表格達到指定的高度和寬度時會發生這種行為嗎？
* { 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 個解決方案
解決方案1
0 2020-12-11 00:05:05
設置display: block; 在 table-class 上應該可以解決問題。 盡管您可能還想設置寬度和高度的最大值（或者只使用寬度和高度）。
解決方案2
0 2020-12-11 00:46:10
只需添加這個
<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>
有趣的是，當您在表中只有該廣告時，它不會正確應用thead 。 如果您刪除thead標簽，它會起作用，或者如果您在tbody中添加一個空的tr 。
HTML表格寬度與CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.