Question

I have a simple HTML table of options here:

<table>
  <tr>
    <td>blue</td>
    <td>green</td>
  </tr>
  <tr>
    <td>red</td>
    <td>cream</td>
  </tr>
</table>

The CSS with the relevant styles:

td { background-color: #FFF; border: 1px solid #3F3F3F; cursor: pointer; }
td.selected { color: #D93A2C; border: 1px solid #D93A2C; }

Looks like this:

When I click on one of the table cells, I want the border and text to be red. So I use jQuery to toggle the ‘.selected’ class using the following code.

$('td').each(function(){
    $(this).click(function(){
        $(this).toggleClass('selected');
    });
});

However the result is this:

The first table cell (blue) is the only one that looks as I want when selected. I need all the borders of the selected cell to be highlighted.

Any ideas on how to achieve this? I’m not opposed to ditching tables if someone can suggest a better way.

Answer 1

This works nicely for me:

<style type="text/css">
    table { border: 1px solid #000; border-collapse: collapse; }
    td { border-top: 1px solid #000; border-left: 1px solid #000; }
    td.selected { border: 1px solid #F00; }
</style>

<table>
    <tr>
        <td>blue</td>
        <td>green</td>
    </tr>
    <tr>
        <td>red</td>
        <td class="selected">yellow</td>
    </tr>
</table>