Kyle Kyle -3 years ago 56
CSS Question

Odd border around html table cell with colspan?

My question is similar to THIS question, but I'm unable to use divs instead of colspans with a table.

It appears to be an issue that only appears in chrome, but I need to find a workaround.

My use case is very similar to the one below. Notice how the top border for 3.3 spans two columns, which is clearly not right. In my use case, the user is able to change which cells are merged so I can't set the border for a specific cell.

How do you set a cell's border to be confined to its own cell instead of sharing with a common cell whose colspan is greater than 1?

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 colspan="2">2.3</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>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;
}

td.brdr-b-hide {
border-bottom: none;
}
td.brdr-r-hide {
border-right: none;
}


JavaScript

var fnActivate = function(target) {
target.addClass('active');

if(!target.is(':first-child')) {
target.prev().addClass('brdr-r-hide')
}

var tr = target.closest('tr');
if(!tr.is(':first-child')) {
var prevTr = tr.prev();
$('td', prevTr).eq($('td', tr).index(target)).addClass('brdr-b-hide');

}
};

var fnDeactivate = function(target) {
target.removeClass('active');

if(!target.is(':first-child')) {
target.prev().removeClass('brdr-r-hide')
}

var tr = target.closest('tr');
if(!tr.is(':first-child')) {
var prevTr = tr.prev();
$('td', prevTr).eq($('td', tr).index(target)).removeClass('brdr-b-hide');

}
}

$('table').on('click', 'td', function(e){
var target = $(e.currentTarget);

if(e.ctrlKey && target.hasClass('active')){
fnDeactivate(target);
} else if(e.ctrlKey) {
fnActivate(target);
} else {
fnDeactivate($('table td.active'));
fnActivate(target);
}

});


CODE: Plunkr

Answer Source

Issue was fixed by using:

table {
  border-collapse: separate;
}

Code: Plunkr

It's a little different on the front end as each cell now has its own border of 1px, but it's a good workaround for the time being.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download