Shell脚本将CSV转HTML表时列错位问题求助

我来帮你搞定这个问题！先梳理下你的情况：你用awk写了个Shell脚本转CSV到HTML表格，大部分情况能用，但遇到长文本的CSV就会列错位，数据乱跑，列宽也乱。咱们先看看问题根源，再给你改好的代码。

问题背景回顾 #

你用的示例CSV是这样的：

Id,Employee,Task,Status,Date
5303,Mancha,Testing,Failure,20-20-20
2532,Mari,Requirement,Success,20-20-20

你的原脚本代码是：

csv_to_html()
{
report_html=$(awk 'BEGIN {FS=",";
            print "<html><head><style>"
            print "table, tr, td {font-family : Tahoma, sans-serif; border: 1px solid; border-collapse: collapse; font-size: 12px; width: 100%;}"
            print ".green {background-color: #98FB98; color:black}"
            print ".red {background-color: #F08088; color:black}"
            print ".grey {background-color: #C0C0C0; color:black}"
            print ".white {background-color: #FFFFF; color:black}"
            print "<body><table>"
            
NR == 1 {   print "<tr bgcolor=\"#87CEFA\"; width: 100%>";
            for (i = 1; i <= NF; i++) print "<td><b>" $i "</b></td>";
               print "</tr>"}
NR > 1  {   print "<tr width: 100%;>";
            for (i = 1; i <= NF; i++)
               print "<td" (" class=" ($i=="Failure"?"red":$i=="Sucess"?"green":$i=="NONE"?"#FFFFE0":"white")) ">" $i "</td>";
               print "</tr>")
END     {print "</table></body></html>}'              
}

问题根源分析 #

出现列错位和列宽混乱主要是这几个原因：

1. CSS样式冲突+错误：你给table, tr, td都加了width:100%，这会让浏览器的宽度计算混乱；而且.white的颜色值写错了，应该是#FFFFFF少了个F。
2. 长文本没换行：单元格里的长字符串默认不会自动换行，直接撑破单元格，导致布局乱掉。
3. HTML语法错误：比如<tr bgcolor="#87CEFA"; width: 100%>里的分号是错的，还有NR>1代码块最后多了个)，这会让awk报错。
4. 拼写错误：你把Success写成了Sucess，导致成功状态的绿色样式根本不生效。

修复后的完整脚本 #

csv_to_html()
{
report_html=$(awk 'BEGIN {
            FS=",";
            print "<html><head><style>"
            # 优化表格布局，固定列宽+自动换行
            print "table {font-family: Tahoma, sans-serif; border: 1px solid; border-collapse: collapse; font-size: 12px; width: 100%; table-layout: fixed;}"
            print "tr {width: 100%;}"
            print "td {border: 1px solid; padding: 4px; word-wrap: break-word;}"
            print ".green {background-color: #98FB98; color: black}"
            print ".red {background-color: #F08088; color: black}"
            print ".grey {background-color: #C0C0C0; color: black}"
            print ".white {background-color: #FFFFFF; color: black}"
            print ".yellow {background-color: #FFFFE0; color: black}" # 给NONE状态单独做个类，更清晰
            print "</style></head><body><table>" # 之前没闭合style和head标签，现在补上
        }
NR == 1 {
            print "<tr style=\"background-color: #87CEFA;\">"; # 用style代替旧的bgcolor，写法更规范
            for (i = 1; i <= NF; i++) {
                print "<td><b>" $i "</b></td>";
            }
            print "</tr>"
        }
NR > 1  {
            print "<tr>";
            for (i = 1; i <= NF; i++) {
                # 修复Success的拼写错误，调整类名逻辑
                class = ($i == "Failure" ? "red" : $i == "Success" ? "green" : $i == "NONE" ? "yellow" : "white");
                print "<td class=\"" class "\">" $i "</td>";
            }
            print "</tr>"
        }
END     {
            print "</table></body></html>"
        }' "$1") # 加上$1接收CSV文件路径，这样函数能正确处理指定文件
}

# 使用示例：
# csv_to_html your_input.csv
# echo "$report_html" > output.html

关键修改点说明 #

• CSS优化：
  • 给表格加table-layout: fixed，让列宽根据表头均匀分配，不会被长文本打乱；
  • 给td加word-wrap: break-word，强制长文本换行，避免撑破单元格；
  • 修正了颜色值错误，给NONE状态单独做了.yellow类，语义更清晰；
  • 给单元格加了padding，让内容看起来更舒服。
• 语法修正：
  • 闭合了style和head标签，修复了awk里的多余括号错误；
  • 把旧的bgcolor改成了标准的style属性写法。
• 逻辑修正：
  • 修复了Success的拼写错误，确保状态样式正常生效；
  • 添加了"$1"参数，让函数可以接收CSV文件路径，使用更灵活。

这样修改后，不管CSV里的字符串多长，表格都能保持整齐的列布局，不会再出现错位问题啦！

内容的提问来源于stack exchange，提问作者Harish H B