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

Asked 11/5, 2011 at 9:46 Answered 11/5, 2011 at 9:55

Solved html css google-chrome html-table right-align

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?

Palmira answered 11/5, 2011 at 9:46 Comment(0)

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

Nitin answered 11/5, 2011 at 9:55 Comment(3)

Odd. It seems that a carriage return before the BR is considered significant whitespace and thus included as a literal space. I assume that's why this works (because the whitespace between the block level elements becomes insignificant) but I can't for the life of me think of why that would be and I'd be fairly confident to say that I don't think there will be an easy CSS method of getting rid of this. – Anachronistic 11/5, 2011 at 10:15

I couldn't formulate it any better. A BR that is considered a significant whitespace and thus included as literal space, sound like a bug to me in the Google Chrome render engine. No ? – Palmira 11/5, 2011 at 12:53

@Linefeed: I agree, and here's a similar bug report: code.google.com/p/chromium/issues/detail?id=40634 – Nitin 11/5, 2011 at 13:46

Because each of the browsers handle HTML in different ways (see quirks mode) you will need to use CSS to change the style of the page. In order to maintain the same look over all (or as many as possible) I suggest starting with a CSS reset like Eric Meyer's Reset Reloaded. Then you can set the styles the way you want from there.

Sixteenmo answered 11/5, 2011 at 9:52 Comment(3)

Even with a CSS reset the problem stays the same. Indicating what type of styles I should set would be a great answer to my question. – Palmira 11/5, 2011 at 9:53

Okay, without knowing the CSS you are using what you probably want is the adjust the text-align property for the cell(s) in question. However, you are also going to be affected by the padding as well so that may need to be adjusted as well. W3 has great documentation on tables here: w3.org/TR/CSS2/tables.html – Sixteenmo 11/5, 2011 at 10:11

the question has all that you need to repro the problem so you don't need to know any more about the CSS. – Anachronistic 11/5, 2011 at 10:12

Recommended topics

Hot tags