0

So the code below is how I want the table to look. But I was wondering if I could achieve the same thing using the direct descendant CSS selector combinator (next code snippet).

.tabs td.line + td.line {
  border-left: 1px solid grey;
}
<table cellspacing="0" cellpadding="0" class="tabs" style="border-bottom: 5px solid black" width="100%">
  <tr>
    <td height="10px">
    </td>
  </tr>
  <tr>
        <td valign="center" align="center" style="padding: 10px 0" class="line">
          <table>
            <tr>
              <td>
                something
              </td>
              <td valign="center">
               something else
              </td>
            </tr>
          </table>
        </td>
        <td valign="center" align="center" style="padding: 10px 0" class="line">
          <table>
            <tr>
              <td>
                something
              </td>
              <td valign="center">
               something else
              </td>
            </tr>
          </table>
        </td>
        <td valign="center" align="center" style="padding: 10px 0" class="line">
          <table>
            <tr>
              <td>
                something
              </td>
              <td valign="center">
               something else
              </td>
            </tr>
          </table>
        </td>        
  </tr>
</table>

This doesn't work as expected. Was expecting it to go to first table, find direct descendant tr and apply it to direct descendant td.

.tabs > tr > td + td {
  border-left: 1px solid grey;
}
<table cellspacing="0" cellpadding="0" class="tabs" style="border-bottom: 5px solid black" width="100%">
  <tr>
    <td height="10px">
    </td>
  </tr>
  <tr>
        <td valign="center" align="center" style="padding: 10px 0" class="line">
          <table>
            <tr>
              <td>
                something
              </td>
              <td valign="center">
               something else
              </td>
            </tr>
          </table>
        </td>
        <td valign="center" align="center" style="padding: 10px 0" class="line">
          <table>
            <tr>
              <td>
                something
              </td>
              <td valign="center">
               something else
              </td>
            </tr>
          </table>
        </td>
        <td valign="center" align="center" style="padding: 10px 0" class="line">
          <table>
            <tr>
              <td>
                something
              </td>
              <td valign="center">
               something else
              </td>
            </tr>
          </table>
        </td>        
  </tr>
</table>

Basically wondering only about the css part.

Ry-
  • 209,133
  • 54
  • 439
  • 449
A. L
  • 10,555
  • 20
  • 75
  • 142

0 Answers0