bart2puck bart2puck - 1 year ago 40
CSS Question

table borders vertical and horizontal not meeting

I have a simple table and im only trying to get borders around some of the cells.

.comments .b {
border-bottom: 1px solid #919295;
.comments .t {
border-top: 1px solid #919295;
.comments .l {
border-left: 1px solid #919295;
.comments .r {
border-right: 1px solid #919295;

<table align='center' width='100%' class='comments'>
<th width='15%' class='r b'>val</th>
<th width='45%'>ba</th>
<th width='40%'>"sadf</th>
<th width='15%' class='r b'>"dsf</th>
<th rowspan='2' colspan='2'>"sdf</th>
<tr height='60px'><th colspan='3'>&nbsp;</th></tr>
<tr height='35px'><th>&nbsp;</th><th colspan='2'>&nbsp;</th></tr>

The result is:

enter image description here

How can i remove the spaces indicated by the arrows?

I have tried
border-spacing: 0px;

Answer Source


table {
  border-collapse: collapse;