How to ignore the extra white space in Google Chrome in a right aligned table row?
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><b开发者_JAVA百科r /><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?
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
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.
加载中,请稍侯......
精彩评论