How to ignore the extra white space in Google Chrome in a right aligned table row?

StackOverflow https://stackoverflow.com/questions/5962264

Question

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?

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top