Peter's Blog

I had an application where I wanted most of the cells in an html table to have borders around them except for the columns on the right. I managed to achieve this thusly:

   1  <table class="tablewithborders">
   2    <tr>
   3      <th>Heading 1</th><th>Heading 2</th><td class="tablecellnoborders" >&nbsp;</td>
   4    </tr>
   5    <tr>
   6      <td>Data 1</td><td>Data 2</td><td class="tablecellnoborders" >edit</td>
   7    </tr>
   8    <tr>
   9      <td>Data 1</td><td>Data 2</td><td class="tablecellnoborders" >edit</td>
  10    </tr>
  11  </table>

The css looks like this:

   1  table.tablewithborders th {
   2      border: 1px solid black;
   3      padding: 3px;
   4      background: #266A9B;
   5      color: #ffffff;
   6  }
   7  
   8  table.tablewithborders td {
   9      border: 1px solid black;
  10      padding: 3px;
  11  }
  12  
  13  table.tablewithborders td.tablecellnoborders {
  14      border: 0px solid white;
  15      padding: 3px;
  16  }

The magic is in the last selector: .tablewithborders td.tablecellnoborders. This specifically styles td cells of class tablecellnoborders within a table of class tablewithborders.

Here is what it looks like:

As you see, I have nice links at the end of each row that allow that row to be edited.

It looks easy spelt out like this but this is actually an epithany for me in my understanding of css selectors.

And as for embedding the example output in this blog using an iframe linked to the example file... mwah.