HTML 自定义 JUnit 报告表对齐不均匀
我正在编写一个 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>
I am coding a java class that generates HTML table reports for JUnit tests and use CSS for visual formatting. I am having an issue aligning the cells since the number of colummns generated is unforseeable since some of these columns represent parameters passed into a variadic function. Therefore there is inherent misalignment in the columns. Is there any way to align these cells through a CSS attribute or something? I dont really want to alter the underlying java code to change this aesthetic issue.
Here is what a sample table generated would look like:
http://lh5.ggpht.com/_N67DMbmmQMQ/TK6Q-Vlhd3I/AAAAAAAAAB8/JDFR1B5HX-k/JUnitReportExample.png
Here is the HTML source for the table (formatted properly):
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我认为你无法通过简单的 CSS 做到这一点。
您不想因为美观问题而更改 Java 代码，但是问题是您的表确实不应该更改列数。参数列应该只是一列，并通过其他方式来分隔值。您可以在第二列中生成以逗号分隔的参数列表。这样，您将始终拥有 3 列，并且更容易正确设置格式。
如果您确实希望将值保留在单独的列中，则应该在最后一个参数上使用 colspan 属性。例如，最后一个参数列可能看起来像这样，在你的java字符串（或任何你用来生成html的）中看起来有点像：
我强烈建议你调整你的java代码来做到这一点，作为替代方案（用javascript修改）更加痛苦（即使使用像 JQuery 这样的东西）。
I don't think you will be able to that with simple CSS.
You don't want to change your java code for an aesthetic issue but, the problem is that your table really shouldn't have a changing number of columns. The parameters columns should be only one column with some other means to separate the values. You could generate a comma separated list of the parameters in the second column. That way you would always have 3 columns and the thing will be far easier to format properly.
If you really want to keep the values in separate columns, you should use the colspan attribute on the last parameter. For example the last parameter column could look like this, with in your java string (or whatever you use to generate the html) looking somewhat like :
I strongly suggest you adjust you java code to do this, as the alternatives (modifying with javascript) are a lot more painful (even with things like JQuery).