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.