HTML表格文本对齐调整：实现指定截图样式的方法

问题说明 #

需要实现表格内文本的特定对齐效果，让第一行的「Arcui quam id partinuculam」精准对齐到下方以「Arcu」开头的单元格正上方，现有代码因列结构混乱、未设置明确宽度规则，无法达到预期样式。

修改要点 #

• 统一列结构：确保表格每行的列数一致，第一行标题单元格无需跨过多列，直接对应下方「Arcu」所在的列位置
• 设置固定宽度：给表格整体设置足够的宽度，同时为每一列定义明确的宽度值，保证下划线和文本的位置匹配
• 调整对齐规则：让第一行标题与下方「Arcu」单元格保持左对齐
• 统一单元格样式：统一单元格高度、下划线样式，避免布局错乱

修改后的完整代码 #

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
    <meta charset="UTF-8">
    <style>
        table {
            width: 1200px; /* 设置表格总宽度，适配内容和下划线 */
            border-collapse: collapse; /* 合并边框，避免间隙 */
        }
        .text-cell {
            height: 40px;
            vertical-align: bottom;
            text-align: left;
            padding-right: 10px; /* 文本与下划线之间留间距 */
        }
        .line-cell {
            border-bottom: 1px solid black;
            width: 400px; /* 下划线单元格固定宽度 */
            height: 40px;
        }
        .header-text {
            text-align: left;
            height: 40px;
            padding-right: 10px;
        }
    </style>
</head>
<body>
<table>
    <tbody>
        <!-- 标题行：对应下方Arcu所在的第一列位置 -->
        <tr>
            <td class="header-text">Arcui quam id partinuculam</td>
            <td class="line-cell">&nbsp;</td>
            <td colspan="3">&nbsp;</td> <!-- 占位，保证列数与下方一致 -->
        </tr>

        <tr>
            <td class="text-cell">Arcu</td>
            <td class="line-cell">&nbsp;</td>
            <td class="text-cell" colspan="3">, partium ut proponit conditione ad molunt donec</td>
        </tr>
        <tr>
            <td class="text-cell">Nihil</td>
            <td class="line-cell">&nbsp;</td>
            <td class="text-cell">Elucescunt</td>
            <td class="line-cell">&nbsp;</td>
            <td>&nbsp;</td> <!-- 占位，保证列数一致 -->
        </tr>
        <tr>
            <td class="text-cell">Opiniones</td>
            <td class="line-cell">&nbsp;</td>
            <td colspan="3">&nbsp;</td> <!-- 占位 -->
        </tr>
        <tr>
            <td class="text-cell">Erat</td>
            <td class="line-cell">&nbsp;</td>
            <td colspan="3">&nbsp;</td> <!-- 占位 -->
        </tr>
    </tbody>
</table>
</body>
</html>

说明 #

通过上述修改，表格的列结构统一，宽度规则明确，第一行标题会精准对齐到下方「Arcu」单元格的正上方，同时下划线的位置和长度也能保持一致。你可以根据实际需求调整表格总宽度和下划线单元格的宽度值。

内容的提问来源于stack exchange，提问作者Julie S.