Table with horizontal lines only

[NM_AuerSignal]

Hello,

could anybody help me to create a table (on my blog post) with horizontal lines only? 

I'm not very familiar with CSS / HTML codes. Is there a way to edit the classic tables to a table with just horizontal lines (and no vertical lines)?

Thanks in advance,

Nadine

[piersg · Accepted solution]

Add this to your page's Header HTML in the advanced settings

<style>
  table {
    border-collapse: collapse;
    border: none;
  }
  tr {
    border-top: 1px solid black;
  }
  tr:first-child {
    border-top: none;
  }
  td {
    border: none !important;
  }
</style>

You should get this

[NM_AuerSignal]

Thank you! Its working 🙂

[NM_AuerSignal]

Hey,

thanks, I will have a look at it !
Here is the page (not published yet): https://blog.auersignal.com/de/-temporary-slug-b047bb2f-a1be-4d42-9be8-efb4647474c7?hs_preview=Zigta...

Exactly, the tables should look like your table. 

Thanks for your help!

[piersg]

Do you have a page with a specific example you can link to? If you have an HTML table like so:

<table>
  <tbody>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>

Your css would be

table {
    border-collapse: collapse;
}
tr {
    border-top: 1px solid black;
    border-left: none;
    border-right: none;
    border-bottom: none;
}
/* if you want the first row to not have a top border */
tr:first-child {
    border: none;
}

Which would look like this