add padding for RTL content after use row_number CSS

Question

I used below CSS code for add row number to a table rows:

table {
    direction: rtl;
    counter-reset: line-number;
}

td:first-child {
    text-align: right !important;
}

td:first-child:before {
    content: counter(line-number) ".";
    counter-increment: line-number;
    padding-right: 0.3em;
    color: lightgray;
}

but it's content not align right after tenth row. See below image:

But I want something like this:

I also try add padding but it's not a working solution.

How fix this?

This is my Fiddle now.

What are you saying? Thats working as intended is it not? The number 10 will take up more room then 9 due to the extra digit. I'm not sure what your trying to get at. — Ruddy, Aug 11 '16 at 07:53
Sorry for my bad English. I want to align above checkbox (or other content when using row number) — b24, Aug 11 '16 at 07:56

Abhishek Pandey · Accepted Answer · 2016-08-11T08:12:17.757

2

You can set min-width of td:first-child:before.

td:first-child:before {
content: counter(line-number) ".";
counter-increment: line-number;
padding-right: 0.3em;
color: lightgray;
min-width: 20px;
display: inline-block;
}

edited Aug 11 '16 at 08:12

answered Aug 11 '16 at 07:58

Abhishek Pandey

13,302
8
38
68

unfortunately `min-width` not work for me. I also add fiddle see it: https://jsfiddle.net/z5mfbmhm/ – b24 Aug 11 '16 at 08:11
1

Use updated css: `min-width: 20px;` `display: inline-block;`. – Abhishek Pandey Aug 11 '16 at 08:13

score 0 · Answer 2 · answered Aug 11 '16 at 07:57

Make sure you put the number in an element, like this:

<input type="checkbox"> <div class="number">10</div>

Then you can style that element, to have a minimum width:

.number {
   min-width:20px;
}

That way they have the same with, and you don't need funny padding depending on how many digits the number has.

add padding for RTL content after use row_number CSS

2 Answers2