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>
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).