Apply style to specific child table placed in another table

Question

I am in a need to apply a style to the table which is placed in the third row of another table,

<html> <head> <title>HTML Table</title> </head> <body> <table class="wizard-ux"> <tbody> <tr> <table> <tr> <td>test Table 2</td> <td>test Table 2</td> </tr> </table> </tr> <tr> <table> <tr> <td>test Table 2</td> <td>test Table 2</td> </tr> </table> </tr> <tr> <td> <table> <tr> <td>Save (Width has to be 90%)</td> <td>Cancel (Width has to be 10%)</td> </tr> </table> </td> </tr> </tbody> </table> </body> </html>

since this is asp.net wizard I don't have id or class for the child table, the only reference is "wizard-ux" of the parent. I need to set the width of the first column as 90% and second column as 10% through CSS,

can somebody suggest a CSS for this,

thanks in advance,

.wizard-ux:nth-last-child(2) td:first-child { width:90%; text-align:right;} .wizard-ux:nth-last-child(2) td:nth-child(2) { width:10%; text-align:center;} but fails — Vicky S
– Vicky S, Commented Sep 18, 2018 at 13:34
arun kumar, tried table.wizard-ux tr:last-of-type table td {width:90%;} but no effect — Vicky S
– Vicky S, Commented Sep 18, 2018 at 13:38
try table.wizard-ux tr:nth-child(3) tr td:nth-child(1) { width: 90%; } table.wizard-ux tr:nth-child(3) tr td:nth-child(2) { width: 10%; } — sudheer singh
– sudheer singh, Commented Sep 18, 2018 at 13:40

Arun Kumar · Accepted Answer · 2018-09-18 13:40:52Z

2

Try below CSS

.wizard-ux tr:last-of-type table td:first-of-type { width:90%; } .wizard-ux tr:last-of-type table td:last-of-type { width:10%; }

answered Sep 18, 2018 at 13:40

Arun Kumar

8955 silver badges12 bronze badges

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

3 Comments

jla Over a year ago

Your comment above suggesting table.wizard-ux tr:last-of-type table was good enough. The problem is that the original HTML is invalid. Some of the inner tables do not have parent td tags, the tables are being placed directly in tr tags which is invalid.

Arun Kumar Over a year ago

Yes, it seems like he is using the tables under td as he is using under last tr but pasted the wrong html in question

Vicky S Over a year ago

i have created that for reference, but the case is those tables are getting auto generated by Asp.Net wizard, i need to align Save, Cancel buttons, anyways it works perfectly thank you so much.

Ashish · Accepted Answer · 2018-09-18 13:49:14Z

I have tried by giving id to those columns

<td id="wid90">Save</td> <td id="win10">Cancel</td>

Then I use this css

#wid90 { width: 90% } #wid10 { width: 10% }

I dont know if it works or not

Collectives™ on Stack Overflow

Apply style to specific child table placed in another table

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related