0

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,

Vicky S
  • 762
  • 4
  • 16

2 Answers2

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

}
Arun Kumar
  • 885
  • 5
  • 11
  • 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. – jla Sep 18 '18 at 13:47
  • 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 – Arun Kumar Sep 18 '18 at 13:48
  • 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. – Vicky S Sep 18 '18 at 13:51
0

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

Ashish
  • 6,791
  • 3
  • 26
  • 48