我正在编写一个java类，它为JUnit测试生成HTML表格报告，并使用CSS进行可视化格式化。由于生成的柱子数量不可预测，因此我有一个问题是对齐单元格，因为其中一些列表示传递给可变参数函数的参数。因此，列中存在固有的错位。有没有办法通过CSS属性或其他东西对齐这些单元格？我真的不想改变底层的java代码来改变这个美学问题。
以下是生成的示例表的样子：
http://lh5.ggpht.com/_N67DMbmmQMQ/TK6Q-Vlhd3I/AAAAAAAAAB8/JDFR1B5HX-k/JUnitReportExample.png
以下是表格的HTML源代码（格式正确）：
<html>
<head>
<style type="text/css">
td
{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
border: 1px solid black;
padding: 3px 7px 2px 7px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<b>Method:</b>
<font color="blue" face="Verdana">
testOne
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
1
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
1
</font>
</td>
<td>
<b>Result:</b>
<font color="green" face="Verdana">
Passed
</font>
</td>
</tr>
<tr>
<td>
<b>Method:</b>
<font color="blue" face="Verdana">
testTwo
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
BMW
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
Audi
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
Mercedes
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
Porsche
</font>
</td>
<td>
<b>Result:</b>
<font color="green" face="Verdana">
Passed
</font>
</td>
</tr>
<tr>
<td>
<b>Method:</b>
<font color="blue" face="Verdana">
testThree
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
21154423
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
2443
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
12121
</font>
</td>
<td>
<b>Result:</b>
<font color="green" face="Verdana">
Passed
</font>
</td>
</tr>
<tr>
<td>
<b>Method:</b>
<font color="blue" face="Verdana">
testFour
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
4.1222
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
2.0001
</font>
</td>
<td>
<b>Result:</b>
<font color="red" face="Verdana">
Failed
</td>
</tr>
<tr>
<td>
<b>Method:</b>
<font color="blue" face="Verdana">
testFive
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
10
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
10
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
Kungsholmens Hamn
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
Melissa Horn
</font>
</td>
<td>
<b>Result:</b>
<font color="green" face="Verdana">
Passed
</font>
</td>
</tr>
<tr>
<td>
<b>Method:</b>
<font color="blue" face="Verdana">
testSix
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
Sweden
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
Sweden
</font>
</td>
<td>
<b>Result:</b>
<font color="green" face="Verdana">
Passed
</font>
</td>
</tr>
<tr>
<td>
<b>Method:</b>
<font color="blue" face="Verdana">
testSeven
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
Lisa Ekdahl
</font>
</td>
<td>
<b></b>
<font color="purple" face="Verdana">
Lisa Ekdahl
</font>
</td>
<td>
<b>Result:</b>
<font color="green" face="Verdana">
Passed
</font>
</td>
</tr>
</table>
</body>
</html>
</table>
</body>
</html>
答案 0 :(得分：2)
我认为你不能用简单的CSS。
您不希望为审美问题更改Java代码，但问题是您的表实际上不应该有不断变化的列数。参数列应该只有一列，其他一些方法可以分隔值。您可以在第二列中生成逗号分隔的参数列表。这样你就可以拥有3列，并且可以更容易地正确格式化。
如果您确实希望将值保留在单独的列中，则应在最后一个参数上使用 colspan 属性。例如，最后一个参数列可能如下所示，在您的java字符串（或用于生成html的任何内容）中看起来有点像：
"<td colspan="+ (maxNumberOfColumns-currentColumnIndex) +">"
我强烈建议您调整java代码来执行此操作，因为替代方法（使用javascript修改）会更加痛苦（即使使用JQuery之类的东西）。