HTML输出表格无水平边框及日期字段换行问题技术咨询

问题排查&解决方法 #

1. 表格水平边框不生效的原因

• 表格标签语法错误：你写的<table width="400px" align="center" colspan="40" table border="5">存在两处错误，一是多了冗余的table关键字，二是colspan是单元格（td/th）专属属性，放在table标签上完全无效，会导致边框属性解析异常。
• 边框模式默认分离：浏览器默认表格边框为分离模式，就算border属性生效，内部行之间的边框也不会连续显示，需要手动设置边框合并。
• 动态渲染逻辑错误：你当前是把所有提交的记录都塞到固定的2行表格的第二行单元格里，仅用<br>做换行，没有生成新的表格行，多条数据之间自然不会出现水平分割边框。
• 额外语法错误：提交按钮的代码<input type="button" ...></button>标签不匹配，input是单标签，不需要后面的</button>闭合。

2. 具体修改方案

（1）HTML部分修改

修正表格标签、移除冗余的单元格div、添加边框合并和禁止换行的样式，参考代码：

<td align="center"><input type="button" value="Submit" name="submit" id="submit" onClick="display()" /></td>
</tr>
</table>
<!-- 调整表格宽度避免内容挤压，添加边框合并样式 -->
<table width="700px" align="center" border="1" style="border-collapse: collapse;">
    <tr style="background-color:#8FBC8F;">
        <td align="center" width="150px"><b>Name</b></td>
        <td align="center" width="150px"><b>Company</b></td>
        <!-- 时间列添加white-space: nowrap禁止换行，固定宽度 -->
        <td align="center" width="120px" style="white-space: nowrap;"><b>Time In</b></td>
        <td align="center" width="120px" style="white-space: nowrap;"><b>Time Out</b></td>
        <td align="center" width="160px"><b>Description of Work</b></td>
    </tr>
    <!-- 移除原来的第二行和内部的div，后续通过JS动态插入行 -->
</table>

（2）JS部分修改

调整display函数逻辑，每次提交直接生成新的表格行插入，不需要再拆分innerHTML处理：

function display() {
    // 获取输入值
    const fname = document.getElementById("fname").value.trim();
    const lname = document.getElementById("lname").value.trim();
    const sname = document.getElementById("sname").value.trim();
    const pname = document.getElementById("pname").value.trim();
    const jname = document.getElementById("jname").value.trim();
    if(!fname) return; // 空值不提交
    
    // 获取表格，插入新行
    const table = document.querySelector('table[border]');
    const newRow = table.insertRow(-1);
    
    // 插入5个单元格
    const cell1 = newRow.insertCell(0);
    cell1.align = 'center';
    cell1.textContent = fname;
    
    const cell2 = newRow.insertCell(1);
    cell2.align = 'center';
    cell2.textContent = lname;
    
    const cell3 = newRow.insertCell(2);
    cell3.align = 'center';
    cell3.textContent = sname;
    
    const cell4 = newRow.insertCell(3);
    cell4.align = 'center';
    cell4.textContent = pname;
    
    const cell5 = newRow.insertCell(4);
    cell5.align = 'center';
    cell5.textContent = jname;
    
    // 清空输入框
    document.getElementById("fname").value = "";
    document.getElementById("lname").value = "";
    document.getElementById("sname").value = "";
    document.getElementById("pname").value = "";
    document.getElementById("jname").value = "";
}

// 对应的getValue函数也可以简化，直接遍历表格行获取数据
function getValue() {
    let Items = "";
    const table = document.querySelector('table[border]');
    // 从第二行开始遍历（跳过表头）
    for(let i=1; i<table.rows.length; i++) {
        const row = table.rows[i];
        const rowData = [];
        for(let j=0; j<row.cells.length; j++) {
            rowData.push(row.cells[j].textContent);
        }
        Items += rowData.join(' ,') + '\n';
    }
    console.log(Items);
    return Items;
}

3. 日期不换行补充说明

时间列已经通过white-space: nowrap强制不换行，同时固定了列宽，只要表格总宽度足够，就不会出现折行问题，如果日期格式特别长，可以再适当调大时间列的width值即可。

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