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.

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.

• javascript
• jquery
• html
• css

4 Answers 4

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>

Here is a very hack'ish way of getting the job done, might spark an idea on your end to produce something better... I've not fully tested it across browsers but worked on IE8,chrome,FF. Live example

HTML

<table>
    <tbody>
        <tr>
            <td>XYZ</td>
            <td>asdf</td>
            <td>2346</td>
        </tr>
        <tr>
            <td>XYZ</td>
            <td>asdf</td>
            <td>2346</td>
        </tr>
        <tr>
            <td>XYZ</td>
            <td>asdf</td>
            <td>2346</td>
        </tr>
    </tbody>
</table>

JS

$('td').each(function(){
    $(this).click(function(){
        $(this).toggleClass('selected');
        $(this).prev('td').css('border-right','#ff0000');
        $(this).parent().prev('tr').find('td:nth-child('+(this.cellIndex+1)+')').css('border-bottom','#ff0000')
    });
});

CSS

table{
      border-collapse: collapse;
}

td { border: 1px solid #ccc; padding:3px }

.selected{
    border-color:#ff0000;
    color:#ff0000;
}
.selected-bottom{
    border-bottom-color:#ff0000;
}
.selected-right{
    border-right-color:#ff0000;
}

It's easier to put a DIV in each cell then add the treatment to the DIV.

The CSS outline may be useful here, as it may be on top of other borders (which is the problem here).