CODEWITHSUNDEEP
htmlcss
James Radford
James Radford

Reputation: 1855

how to vertically align table data

i have the following table where the alignment goes wrong because some of the values have brackets in them. I build the data in C# although the table is rendered using html. I do have jquery available. Is there a way to correct the alignment in either of these languages please?

| VALUE  |
| 40%    |
| 20%    |
| (30%)  |
| 10%    |

Notice how the 30% is not aligned correct because of the brackets.

Thanks, James

Upvotes: 0

Views: 154

Answers (3)

Abhitalks
Abhitalks

Reputation: 28387

As you are building the data on server-side (C#), (and that being numbers they would be better off right-aligned) you could append a space before sending the data down to client.

(1) Convert data to string. If brackets are because of being negative then just append a space to positive numbers while converting to string. If brackets are there after conversion to string (result of format), then append space to string values not ending with a ")".

For example: while formatting the numbers:

string myFormat = "#0% ;(#0%)";
myValue.ToString(myFormat);

Notice the space after the positive part (first part) of the format.

For example: if data is already string:

if (! stringValue.Substring(stringValue.Length - 1) == ")") {
    stringValue += " ";
}

Now you have a space padding on your data for positive numbers (or non-bracketed strings).

(2) Once this data is brought to the client, you specify css text-align:right to the table cells. However, if your font is proportionate then this will not line up. So specify a monospace font for these cells (or column). e.g. font-family: courier new; I have also found out that font-family: verdana; will also line up numbers properly as if monospaced.

Upvotes: 0

Gerald Schneider
Gerald Schneider

Reputation: 17797

Two solutions I can think of:

1) Always add the brackets, just make them the same color as the background if you don't need them (you can do that by wrapping the actual value in a <span>). This will not work if someone uses copy&paste on the table.

2) Add spaces instead of the brackets when they aren't there and style the table with a fixed width font and preserved whitespace.

td {
    font-family: monospace;
    white-space: pre;
}

Example: http://jsfiddle.net/GeraldS/SqB3X/

Both solutions are not really pretty, I guess I'd go with Khawer's second example, but this will only work if the visitor doesn't change the font size in his browser.

Upvotes: 0

Khawer Zeshan
Khawer Zeshan

Reputation: 9646

You can correct that using css

table tr td{
    text-align:center;
}

EXAMPLE

If you want to make them left align and yet make the non brackets number to indent slightly you can use text-indent property

EXAMPLE

Upvotes: 1

Related Questions