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-
  • 218,210
  • 55
  • 464
  • 476
A. L
  • 11,695
  • 23
  • 85
  • 163

0 Answers0