Get rid of horizontal border in a table using CSS

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!

score 1 · Answer 1 · answered Sep 19 '17 at 01:35

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>

score 0 · Answer 2 · answered Sep 19 '17 at 01:32

0

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

answered Sep 19 '17 at 01:32

SEFL

539
4
15

score 0 · Answer 3 · answered Sep 19 '17 at 01:33

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;
}

score 0 · Answer 4 · answered Sep 19 '17 at 01:34

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;
}

score 0 · Accepted Answer · answered Sep 19 '17 at 01:37

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>

Get rid of horizontal border in a table using CSS

5 Answers5