CODEWITHSUNDEEP
htmlcssuser-interface
Arun P Johny
Arun P Johny

Reputation: 388416

Table cell highlighting (adjucent cells) - misleading

I've to highlight multiple cells by adding a class called active to td. This class will change the border colour to highlight the cell.

The problem here is if the top, right, bottom and left cells of a particular cell is selected then the center cell will appear to be highlighted even though it is not actually highlighted.

You can find the problem here.

HTML

<div style="padding: 10px">
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
            <td>1.4</td>
            <td>1.5</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td class="active">2.3</td>
            <td>2.4</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td class="active">3.2</td>
            <td>3.3</td>
            <td class="active">3.4</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td class="active">4.3</td>
            <td>4.4</td>
            <td>4.5</td>
        </tr>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>
            <td>5.4</td>
            <td>5.5</td>
        </tr>
    </table>
</div>

CSS

table {
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
}

td {
    border: 1px solid lightgrey;
    height: 60px;
    width: 60px;
    text-align: center;
    vertical-align: middle;
}

td.active {
    border: 1px solid blue;
    border-style:double
}

Here cells 2.3, 3.2, 3.4 and 4.3 are highlighted but 3.3 is not highlighted, but visually it appears to be highlighted.

Can anybody suggest a way to solve this problem?

Upvotes: 1

Views: 81

Answers (1)

Sanjeevi.V
Sanjeevi.V

Reputation: 643

You can use

table {
     table-layout: fixed;
     border-spacing: 2px;
     border-collapse: separate;
}

however it will pad the cells. If you don't want your cells to pad you can alternatively use a background to highlight the cells.

Demo:

table with cell padding

table with cell highlight

Upvotes: 1

Related Questions