All geek questions in one place

How to ignore excess space in Google Chrome in the right row of the table?

I have a table with right alignment cells that is being created on the server side. Each row inside the cell is optional, so it is enclosed in an if-then statement on the server side.

The html example shows 3 columns where the first column is broken in Google Chrome. Columns 2 and 3 are correct, but weird because the html is the same, with the exception of newlines and spaces.

When we look at the first column in Google Chrome, you will notice that the right margin does not align 100% for each row inside the cell.

These problems do 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>

Creating html in a different way is not an option.

How can I make this work in Google Chrome, and not change the html, but maybe set an extra style or something else?

+6
source share
2 answers

Just change the HTML.

How hard is it to be? Why can't you change it?

This works without modifying the HTML, but it's a little silly:

 td span { display: block } td br { display: none }

Source Code: http://jsbin.com/ipaca5
With my fix: http://jsbin.com/ipaca5/2

+3
source

Since each browser handles HTML differently (see quirks mode), you will need to use CSS to change the style of the page. To keep everyone looking the same (or as large as possible), I suggest starting with a CSS reset, such as Eric Meyer Reset Reloaded . Then you can set the styles as you want.

0
source

Source: https://habr.com/ru/post/887811/

More articles:


All Articles