Get rid of horizontal border in a table using CSS - html

Question

I want to get rid of the horizontal line in the middle. Basically, I want the table to have the outer borders and a vertical divider in the middle. How do I achieve this?
JS Fiddle - https://jsfiddle.net/kac69ovn/
table {
width: 85%;
border-collapse: collapse;
margin-left: 4%;
border: 1px solid black;
}
th {
text-align: left;
width: 50%;
border: 1px solid black;
padding: 5px 11px;
}
td {
text-align: left;
width: 50%;
border: 1px solid black;
padding: 5px 11px;
}
<table>
<tbody>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text of the printing and </td>
<td>It is a long established fact that a </td>
</tr>
</tbody>
</table>
Thanks in advance!

Answer 1

Keep the full border on your table, but stick to border-left and border-right for your th and td elements.
table {
width: 85%;
border-collapse: collapse;
margin-left: 4%;
border: 1px solid black;
}
th, td {
text-align: left;
width: 50%;
border-right: 1px solid black;
border-left: 1px solid black;
padding: 5px 11px;
}
<table>
<tbody>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text of the printing and </td>
<td>It is a long established fact that a </td>
</tr>
</tbody>
</table>

Answer 2

You can fiddle with the borders:
Set border-top: none for the tds
Set border-bottom: none for the th
Add this to prevent horizontal line when there are multiple trs:
tr:not(:last-child) td {
border-bottom: none;
}
See demo below:
table {
width: 85%;
border-collapse: collapse;
margin-left: 4%;
/*border: 1px solid black;*/
}
th {
text-align: left;
width: 50%;
border: 1px solid black;
border-bottom: none; /* ADDED */
padding: 5px 11px;
}
td {
text-align: left;
width: 50%;
border: 1px solid black;
border-top: none; /* ADDED */
padding: 5px 11px;
}
tr:not(:last-child) td { /* ADDED */
border-bottom: none;
}
<table>
<tbody>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text of the printing and </td>
<td>It is a long established fact that a </td>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text of the printing and </td>
<td>It is a long established fact that a </td>
</tr>
</tbody>
</table>

Answer 3

th, td {border: none; border-right: 1px solid black;}

Answer 4

I think this is what your looking for:
table {
width: 85%;
border-collapse: collapse;
margin-left: 4%;
border: 1px solid black;
}
th {
text-align: left;
width: 50%;
border: 1px solid black;
padding: 5px 11px;
border-bottom: None;
}
td {
text-align: left;
width: 50%;
border: 1px solid black;
padding: 5px 11px;
border-top: None;
}

Answer 5

updated
https://jsfiddle.net/kac69ovn/1/
table {
width: 85%;
border-collapse: collapse;
margin-left: 4%;
border: 1px solid black;
}
th {
text-align: left;
width: 50%;
border-right: 1px solid black;
padding: 5px 11px;
}
td {
text-align: left;
width: 50%;
border-right: 1px solid black;
padding: 5px 11px;
}