how to do conditional css on table row?

Question

I have a css that I need to work on IE8. So I cannot use last-child. As a trick I use

table#GridViewMemory tr:first-child + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr td {
    display:table-cell;
}

to show the 13th row of a table. my table only have two columns

the reason I only want to show the 13th row is because this is a gridview in aspx (vb.net) and the 13th row is the pagination (a link to click page 1 page 2 page 3 and ...)

the problem is the table is not always 12 row. on the last page of the gridview. it could be anywhere between 1 to 12 row.

is it possible to check this using css .. for example:

if 1 row then show 2nd row only
if 2 row then show 3rd row only
if 3 row then show 4rd row only
...
...
...
if 12 row then show 13th row only

    <tbody><tr>
        <th scope="col"><a href="">Column1</a></th><th scope="col"><a href="">Column2</a></th>
    </tr><tr>
        <td>31424-1</td><td>1</td>
    </tr><tr>
        <td>31275-1</td><td>1</td>
    </tr><tr>
        <td>31226-9</td><td>1</td>
    </tr><tr>
        <td>30982-1</td><td>1</td>
    </tr><tr>
        <td>30936-5</td><td>1</td>
    </tr><tr>
        <td>30915-1</td><td>1</td>
    </tr><tr>
        <td>30674-4</td><td>1</td>
    </tr><tr>
        <td>31366-5</td><td>2</td>
    </tr><tr>
        <td>31353-2</td><td>2</td>
    </tr><tr>
        <td>31353-1</td><td>2</td>
    </tr><tr>
        <td>31305-1</td><td>2</td>
    </tr><tr>
        <td>31273-1</td><td>2</td>
    </tr><tr>
        <td colspan="2"><table>
            <tbody><tr>
                <td><span>1</span></td><td><a href="">2</a></td><td><a href="">3</a></td><td><a href="">4</a></td><td><a href="">5</a></td>
            </tr>
        </tbody></table></td>
    </tr>
</tbody>

I tried using this solution but it only shows the last td cell . but not the table inside the last row. Any suggestions or comments?? Thanks

table#GridViewMemory tr td[colspan="2"] {
    display:table-cell;
}

why don't you use a tfooter for your pagination, and has it got to be in a table ? To my point of view, your solution is in your script on server side ... add/remove a class , set it out the structure , whatever else — G-Cyrillus
– G-Cyrillus, Commented Jan 27, 2014 at 17:36
I add more information to the question. I cannot use tFooter .. . I tried to match Colspan="2" but it does not work. — BobNoobGuy
– BobNoobGuy, Commented Jan 27, 2014 at 17:54
maybe it is best to provide a fiddle / codepen or else with all of your css , maybe if you set display:none to tds , but [colspan] , the [colspan] table td needs to be shown too ... — G-Cyrillus
– G-Cyrillus, Commented Jan 27, 2014 at 18:01
I create a fiddle. jsfiddle.net/SinisterSystems/smF7b/1 and I now have a pagerstyle cssclass on the last row — BobNoobGuy
– BobNoobGuy, Commented Jan 27, 2014 at 18:35

MarvinK · Accepted Answer · 2014-01-27 18:00:17Z

1

This is unpossible with a modern and easy way. Because IE8 is at least a crap browser. The best way is to set a class in the lastchild with ASPX

answered Jan 27, 2014 at 18:00

MarvinK

1112 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

G-Cyrillus Over a year ago

it is of course, IMO where soltions stands, on server side script :)

BobNoobGuy Over a year ago

I set the pagerstyle csslass to pagination. Can you help me with css jsfiddle.net/SinisterSystems/smF7b/1

BobNoobGuy Over a year ago

thanks for the suggestion. I figure this out! thank you

Collectives™ on Stack Overflow

how to do conditional css on table row?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related