如何在浏览器控制台中实现表格文本的精准对齐？

数据老陈

2026-8-12

控制台输出对齐表格的实现方案

问题描述

需要从prompt获取输入值，在浏览器控制台输出类表格样式，要求竖线|始终位于加号+正下方，不受输入内容长度影响。当前代码无法实现对齐效果，内容长度变化会导致竖线错位。

解决思路

核心是固定单元格宽度，通过动态计算内容两侧需填充的空格数，让每个单元格总长度保持一致，从而保证竖线对齐：

定义每列的固定宽度（对应表头横线的长度）
对每个输入内容，计算需要补充的空格，将内容填充至指定宽度（支持居中、左/右对齐）
按照表头格式拼接每行内容

实现代码

// 定义列宽，对应表头横线的长度
const COL1_WIDTH = 17;
const COL2_WIDTH = 21;

// 获取输入值
const arr = [];
let input;
while ((input = prompt('Enter any value (enter end to complete the operation) ')) !== 'end') {
    arr.push(input);
}

// 输出表头
const header = `+${'-'.repeat(COL1_WIDTH)}+${'-'.repeat(COL2_WIDTH)}+`;
console.log(header);

// 输出每行内容，保证对齐
arr.forEach(item => {
    // 第一列居中对齐：计算两侧填充的空格
    const paddedCol1 = item.padStart(Math.floor((COL1_WIDTH + item.length) / 2), ' ')
                          .padEnd(COL1_WIDTH, ' ');
    // 第二列示例留空，如需填充内容可按同样逻辑处理
    const paddedCol2 = ' '.repeat(COL2_WIDTH);
    console.log(`|${paddedCol1}|${paddedCol2}|`);
});

// 可选：输出表尾
console.log(header);