HTML中的表格行高怎么调整？行高设置方法详解-html教程-PHP中文网

HTML中的表格行高怎么调整？行高设置方法详解

月夜之吻

发布： 2025-07-23 14:38:02

原创

390人浏览过

<table>
    <tr>
        <td style="height: 50px;">单元格内容</td>
        <td style="height: 50px;">更多内容</td>
    </tr>
    <tr style="height: 70px;">
        <td>另一行</td>
        <td>不同高度</td>
    </tr>
</table>

登录后复制

<!DOCTYPE html>
<html>
<head>
<title>表格行高调整</title>
<style>
    /* 针对所有表格的行 */
    table tr {
        height: 40px; /* 统一设置行高 */
    }
    /* 针对特定类名的单元格，优先级更高 */
    .my-table td.tall-cell {
        height: 60px; /* 特定单元格更高 */
    }
</style>
</head>
<body>
    <table class="my-table">
        <tr>
            <td>内容1</td>
            <td class="tall-cell">内容2</td>
        </tr>
        <tr>
            <td>内容3</td>
            <td>内容4</td>
        </tr>
    </table>
</body>
</html>

登录后复制

/* styles.css */
.data-table tr {
    height: 45px;
}

.data-table td {
    padding: 8px 10px; /* 适当的内边距也能影响视觉上的“行高”感 */
}

.data-table .important-row {
    height: 70px; /* 针对特定行的类名 */
}

登录后复制

<!DOCTYPE html>
<html>
<head>
<title>表格行高调整</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
    <table class="data-table">
        <tr>
            <td>数据A</td>
            <td>数据B</td>
        </tr>
        <tr class="important-row">
            <td>关键信息</td>
            <td>更多关键</td>
        </tr>
    </table>
</body>
</html>

登录后复制

td {
    height: 40px;
    line-height: 40px; /* 让单行文字垂直居中 */
    overflow: hidden; /* 如果文字超出，隐藏 */
}

登录后复制

td {
height: 80px; /* 固定高度 */
overflow: auto; /* 内容超出时显示滚动条 */
}

登录后复制

td {
max-width: 200px; /* 限制单元格最大宽度 */
word-break: break-all; /* 确保长单词也能换行 */
}

登录后复制

/* 默认行高 */
table td {
    height: 40px;
}

/* 在屏幕宽度小于600px时，增加行高 */
@media (max-width: 600px) {
    table td {
        height: 60px;
    }
}

登录后复制

以上就是HTML中的表格行高怎么调整？行高设置方法详解的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

jimdo如何添加html5表单_jimdo表单html5代码嵌入与字段设置【实操】响应式HTML5按钮适配不同屏幕方法【方法】 jimdo能否添加html5弹窗_jimdo弹窗html5代码实现与触发条件【技巧】 html5空行怎么表示_HTML5用换行或p标签占位表示空行分隔【表示】 html5怎么重叠图片_html5用position:absolute或z-index让图片重叠【重叠】

HTML中的表格行高怎么调整？ 行高设置方法详解

大家都在看：

HTML中的表格行高怎么调整？行高设置方法详解