Apply style to specific child table placed in another table

0
votes

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,

2
htmlcssasp.netwizard
Can you use nth:child(x)? – dustytrash
try table.wizard-ux tr:last-of-type table – Arun Kumar
.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
arun kumar, tried table.wizard-ux tr:last-of-type table td {width:90%;} but no effect – Vicky S
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

2 Answers

2
votes

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%;

}
0
votes

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