如何设置HTML表格高度？实现固定高度的滚动Marquee容器

问题说明 #

我试过所有能找到的设置HTML表格、行高度的方法，但都没用。我想做一个带边框的自动滚动Marquee，目前除了表格高度外其他功能都正常。因为文本太长，整个网页（包括边框）会延伸多页，还出现了滚动条。我需要把表格/行的高度静态设置为适配800px的无滚动条浏览器窗口，让长文本在边框内自动滚动。

解决方案 #

要实现固定高度的表格并让文本在内部滚动，需要调整页面布局和元素样式，关键是限制容器高度并让滚动区域仅在marquee内生效：

1. 限制页面整体高度：让html和body占满视口高度，且隐藏溢出，避免页面出现滚动条
2. 固定表格高度：给表格设置明确的800px高度，并通过flex布局让表格在页面中垂直水平居中
3. 设置marquee的滚动容器：给marquee固定高度，同时隐藏溢出，确保文本仅在marquee内部滚动，不会撑大表格
4. 修正表格边框样式：原代码中border:30px写法错误，需要明确边框宽度、样式和颜色

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<style type='text/css'>
html, body {
   background-color: black;
   height: 100%;
   margin: 0;
   padding: 0;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
}
table {
   border-spacing: 30px;
   border: 30px ridge #ccc;
   height: 800px;
   width: 90%;
}
td {
   padding: 30px;
   height: 100%;
   box-sizing: border-box;
}
marquee {
   height: 100%;
   overflow: hidden;
   display: block;
}
p {
   font-family: calibri;
   color:white;
   font-size: 500%;
   text-align:center;
   margin: 0;
}
</style>
<body>
<table align="center">
<tr>
<td align="center">
<marquee behavior="scroll" direction="up" scrollamount="3">
<p>Here I have several paragraphs of text</p>
<p>更多测试文本，用来验证滚动效果</p>
<p>这里可以添加更多长内容，确保文本在边框内滚动</p>
</marquee>
</td>
</tr>
</table>
</body>
</html>

关键修改说明 #

• html, body添加height:100%、overflow:hidden，通过flex布局让表格居中，避免页面滚动条
• table设置height:800px固定高度，同时修正了边框的完整写法
• marquee设置height:100%和overflow:hidden，确保文本在单元格高度范围内滚动，不会撑大表格
• td添加height:100%和box-sizing:border-box，让单元格占满表格高度，padding不会额外增加高度

内容的提问来源于stack exchange，提问作者Turp