我正在编写一个 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>
最佳答案
我认为您无法使用简单的 CSS 做到这一点。
您不想为了美观问题而更改您的 Java 代码，但问题是您的表确实不应该有变化的列数。参数列应该只是一列，用其他方式分隔值。您可以在第二列中生成逗号分隔的参数列表。这样一来，您将始终拥有 3 列，并且格式正确的事情会容易得多。
如果您真的想将值保留在单独的列中，您应该在最后一个参数上使用 colspan 属性。例如，最后一个参数列可能看起来像这样，在您的 java 字符串(或您用来生成 html 的任何内容)中看起来有点像:
"<td colspan="+ (maxNumberOfColumns-currentColumnIndex) +">"
我强烈建议您调整 java 代码来执行此操作，因为替代方案(使用 javascript 进行修改)要痛苦得多(即使使用 JQuery 之类的东西)。
关于java - HTML 自定义 JUnit 报告表对齐不均匀，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3887558/