Menu
I have a table with right align cells that is generated at server side. Each line within a cell is optional, so it is enclosed in an if-then statement at server side.
The sample html shows 3 columns, where the first column is faulty in Google Chrome. Columns 2 & 3 are correct, yet strange, because the html is the same, except for newlines and whitespaces.
When we look at the first column in Google Chrome you will notice that the right margin doesn't align 100% for each line within the cell.
This problems does not exist in Firefox or IE, only in Google Chrome.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #000000;">
<tbody>
<tr>
<td style="text-align: right;border: 1px solid #000000;">
<span>Not Ok in Google Chrome</span>
<br /><span id="C1">500.000,00 €</span>
<br /><span id="C2">166.666,67 €</span>
<br /><span id="C3">489.545,90 €</span>
</td>
<td style="text-align: right;border: 1px solid #000000;">
<span>Ok in Google Chrome</span><br />
<span id="D1">500.000,00 €</span><br />
<span id="D2">166.666,67 €</span><br />
<span id="D3">489.545,90 €</span>
</td>
<td style="text-align: right;border: 1px solid #000000;">
<span>Ok in Google Chrome</span><br /><span id="D1">500.000,00 €</span><br /><span id="D2">166.666,67 €</span><br /><span id="D3">489.545,90 €</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Generating the html in a different way is not an option.
How can I make this work in Google Chrome, not by changing the html, but maybe setting an extra styling or something?
928
The space between the table cells is controlled by the CELLSPACING attribute in the TABLE tag. By setting CELLSPACING to zero, you can remove all the space between the cells of your table.
Just change the HTML.
How hard can it be? Why can't you change it?
This works without changing the HTML, but it's a little silly:
td span {
display: block
}
td br {
display: none
}
Your original code: http://jsbin.com/ipaca5
With my fix: http://jsbin.com/ipaca5/2
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
