HTML表格呈现不同的行高
基础概念
HTML表格是由行（<tr>）和列（<td>或<th>）组成的，用于展示结构化数据。行高指的是表格中每一行的高度。
相关优势
- 结构化展示：HTML表格能够清晰地展示数据，便于用户理解和比较。
- 灵活性：可以通过CSS轻松调整表格的样式，包括行高。
类型
HTML表格的基本结构包括：
<table>：定义表格。<tr>：定义表格的行。<td>：定义表格的单元格。<th>：定义表格的表头单元格。
应用场景
HTML表格广泛应用于各种需要展示数据的场景，如：
- 产品列表
- 成绩表
- 数据报告
如何设置不同的行高
可以通过CSS来设置HTML表格的行高。以下是几种常见的方法：
方法一：内联样式
在每个<tr>标签中使用内联样式来设置行高。
<table>
<tr style="height: 50px;">
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr style="height: 70px;">
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>方法二：内部样式表
在<head>部分使用内部样式表来设置行高。
<!DOCTYPE html>
<html>
<head>
<style>
tr.row1 {
height: 50px;
}
tr.row2 {
height: 70px;
}
</style>
</head>
<body>
<table>
<tr class="row1">
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr class="row2">
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>方法三：外部样式表
将CSS样式放在一个单独的文件中，并通过<link>标签引入。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<tr class="row1">
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr class="row2">
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>styles.css文件内容：
tr.row1 {
height: 50px;
}
tr.row2 {
height: 70px;
}遇到的问题及解决方法
问题：为什么设置了行高，表格的行高没有变化？
原因：
- 样式优先级问题：可能存在其他CSS样式覆盖了你设置的行高。
- 单位问题：确保使用了正确的单位，如
px、em、%等。 - 浏览器兼容性：某些旧版本的浏览器可能不支持某些CSS属性。
解决方法：
- 检查样式优先级：确保你的样式没有被其他样式覆盖。可以使用浏览器的开发者工具检查元素的样式。
- 使用合适的单位：确保使用了正确的单位。
- 兼容性测试：在不同浏览器中测试，确保兼容性。
示例代码
<!DOCTYPE html>
<html>
<head>
<style>
tr.row1 {
height: 50px;
}
tr.row2 {
height: 70px;
}
</style>
</head>
<body>
<table border="1">
<tr class="row1">
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr class="row2">
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>参考链接
通过以上方法，你可以轻松地为HTML表格设置不同的行高，以满足不同的展示需求。
相关·内容
3回答
我正在尝试创建一个HTML表。我希望每行和列具有相同的宽度和高度。 由于某种原因，当检查细胞时，我注意到高度上的差异。 ? ? 有没有人知道为什么会发生这种情况，以及如何修复它？
浏览 75提问于2021-02-11得票数 0
我正在实现一个面向列和基于div的表，它是由表外的数据呈现的。此数据是基于列的结构化数据。例如，它呈现列1，然后呈现行1、行2、行3和列2，然后呈现行1、行2、行..and，依此类推 问题是当其中一个单元格比其他单元格高时，单元格的高度会有所不同，但是我希望这个基于div的自定义表格像
浏览 60提问于2021-11-06得票数 0
我必须将大量的文本放入JTable中。当我尝试将文本放入JTable中时，所有内容都会排成一行，而不会出现如下情况：而且也没有水平滚动条。我是否可以将文本放在新行中，但是在同一行中，这样所有的数据都是visible.If，您注意到快照的末尾有点，虽然仍然有一些文本需要显示，但我看不出来。
我已经试着提高了这一行的高度，但那没有帮助。
浏览 3提问于2012-10-15得票数 1
3回答
HTML表格行高
、、
HTML CSS问题(&C)：
我试图将我的表行限制为一行(5 mm高，30 mm长)。但它应该保持那个大小，即使它不适合这个空间(因为否则我会遇到渐变背景图像大小的问题-看起来很粗糙)。
浏览 1提问于2009-12-03得票数 0
回答已采纳
2回答
我不确定问题出在IE9，而不是其他浏览器，但我认为这是一个安全的开始假设。
在IE9中查看时，我在主布局表格的行间看到一条黑色水平线。这在Firefox4和Chrome中是不可见的。主体背景是黑色的，所以我假设每行之间有一个小的间隙。表声明包括以下属性，并且没有生效的CSS规则。border="0" align="center" cellpadding="0" cellspacing="0"
浏览 1提问于2011-04-10得票数 0
回答已采纳
1回答
通过注释掉选定的代码部分，我确定了以下代码行是罪魁祸首： table.setRowHeight(row, newHeight);
如果我注释掉这一部分，所有的表行都具有相同的高度(1行文本)，但是内存消耗保持在大约如果我将这些行替换为对table.setRowHeight(row, 32)的一次调用，
浏览 19提问于2020-05-18得票数 0
回答已采纳
我已经开发了这个网站在我的笔记本电脑上的网站测试是正确的，相同的设计在IE，Chrome，FF和Opera上。我发现相同版本的火狐在不同的电脑上显示不同的设计。在我的笔记本电脑上的FF显示正确的设计，而在其他笔记本上相同版本的FF显示设计问题，这个问题与我的朋友一起显示了一些正确的，而其他的在FF上有设计问题。
浏览 2提问于2015-06-13得票数 0
回答已采纳
2回答
html表格行高问题
、、、
好的，我把我想要的那张表做得像是一本成绩册，但是我不能编辑行高。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/b
浏览 24提问于2017-01-21得票数 0
回答已采纳
1回答
我希望第1和第3行高度设置为1 px，第2行设置为正常高度。但我的代码不起作用。<table border="0"> <td width="10"><hr></td>
<tr style注意事项：我不希望使用边框，因为我希望对某些行，我可能需要，
浏览 2提问于2013-11-27得票数 15
回答已采纳
但在Internet Explorer11中，它看起来像这样-单元格b由A拉伸，单元格d和e由c拉伸我试过把固定大小的div放进去，用CSS代替HTML，等等艾米，我错过了什么简单的东西吗？
浏览 1提问于2014-10-09得票数 0
我们有角js应用程序，它使用高图表js库。我们制作了几个显示数据组合的小部件，比如在某些小部件中我们只有高图，在一些小部件中我们只有用角指令呈现的表格数据，而在一些小部件中，我们有两者的组合，即高图+一些HTML (可以是简单的项目列表，也可以是用角呈现的表格数据我们看到了这个示例jsfiddle.net/8ypxW/3/，它很好地处
浏览 6提问于2016-03-22得票数 1
我创建了一个电子表格作为模板。它是按预期设置和工作的。当我将模板复制到一个新文件(右键单击选项卡> copy to > new /现有电子表格)时，它会将模板复制到新文件中，除两个文件中的行高不同外，所有操作都按预期进行。我不记得在制作模板时更改过行高，但这两个文件不同--模板行宽度默认值为17 of，新/现有副本的默认行高为21
浏览 5提问于2022-02-13得票数 0
我正在处理一个表，并希望在用值填充后查询它的最终高度。这样我就可以根据它的大小来调整它在幻灯片(graphicframe.top)上的位置。表格高度会发生变化以适应输入(例如:文本可能会换行到2行，从而增加高度，大量的行数可能会使表格比我最初指定的高度更高，等等)。graphicframe.height返回我在add_table中输入的原始高度，而不是数据填充后的最终高度。table.rowsi.height也做同样
浏览 2提问于2017-07-14得票数 0
2回答
这是Android gmail客户端的bug吗？我创建了一个响应式邮件程序，只有android gmail客户端错误地呈现了表格。其他的都很好。代码可通过此链接查看- 或
另外，我忘记了结束的html标签。在我的邮件里，所有的东西都被正确的嵌套和关闭。
浏览 0提问于2014-01-29得票数 0
旧的Google电子表格的默认行高为17，新的Google工作表的默认行高为21。
当一个电子表格是谷歌自动迁移到新的Google工作表之后，原来的行高就会保持下来。这很好。但是，当我在迁移的工作表中创建新工作表时，行的行高也是17，而当我创建新的Googl
浏览 0提问于2015-02-09得票数 5
这里有一些非常简单的HTML。在Chrome (v57)和火狐(v55)上，右边的两个单元格是相同的高度，而在Safari (v11)上则不是。在Safari上，顶部的单元格只有内容所需的大小，而底部的单元格则得到其余的空间。
我的问题是--其中一种行为是正确的，还是一种错误？有什么简单的方法可以让Safari产生与Chrome相同的结果(比如这里有浏览器样式差异)？我已经检查过了
浏览 3提问于2017-09-28得票数 2
回答已采纳
我展示/关闭了带有tableview的模态视图控制器。每次呈现/取消都会导致表格向下移动，在表格和视图顶部之间留下一个间隙。因此，每次我在下课后演示时，我看到我的表向下移动了一行高的距离。
浏览 1提问于2010-05-11得票数 0
回答已采纳
我们有角js应用程序，它使用高图表js库，并将图表呈现为SVG。我们制作了几个显示数据组合的小部件，比如说在某些小部件中我们只有SVG图，在一些小部件中只有用角指令呈现的表格数据，而在一些小部件中，我们有两个小部件的组合，即一些图表+一些HTML (可以是简单的项目列表，也可以是用角呈现的表格数据)。我们看到了这个示例jsfiddle.net/8ypxW/3&#
浏览 2提问于2016-11-15得票数 15
3回答
虽然我已经引用了box模型，但在下面的操作中无法跟踪文本框或任何HTML元素的高度是如何计算的<input type="text" id="test" onclick= "alert('computedhere to get height" style=" border: 0px; "/>我找不到文本框的
浏览 2提问于2015-09-06得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
