How to set the table cell margin to 0?

Question

Horizontally, I'm trying to glue left and right cells by "-" without any white space between them. So I tired to create a middle cell between them with content "-", but it has margin among three cells, so I wondered how do I get rid of the white space (padding and margin) between the middle cell and other cells?

HTML

<table id="test">
    <tr id="userr1">
        <th>Left</th>
        <th class="mid">-</th>
        <th>Right</th>
    </tr>
    <tr id="row1">
        <td>cell</td>
        <td class="mid">-</td>
        <td>cell</td>
    </tr>
    <tr id="row2">
        <td>cell</td>
        <td class="mid">-</td>
        <td>cell</td>
    </tr>
</table>

And the CSS:

#test, th, td {
    border: 1px solid black;
    margin: 0px;
}
.mid {
    border: none;
    padding: 0px;
    margin: 0px;
}

score 3 · Answer 1 · answered Nov 14 '15 at 20:47

3

Try this https://jsfiddle.net/2Lzo9vfc/84/

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

answered Nov 14 '15 at 20:47

Nenad Vracar

118,580
15
151
176

effective and simple. this is the one i like most – MrEhawk82 Jul 19 '18 at 22:52

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

You're missing padding: 0px; for the

test, th, td {}

#test, th, td {
border:1px solid black;
margin:0px;
padding:0px;
  
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 14 '15 at 20:48

Man of Progress

129
2
14

How to set the table cell margin to 0?

2 Answers2

test, th, td {}