Geek Answers Handbook

Create a table with a horizontal line only

How can I build tablein HTML and CSS only with lines horizontally ? I've tried so many things, but I can't get it to work.

Something like that:

Name (space) Age

Andre (space) 12

Jose (space) 16

+5
source share
2 answers

Potentially like this ( jsfiddle ):

table {
    border-collapse: collapse;
    width: 100%;
}

tr {
    border-bottom: 1px solid #ccc;
}

th {
    text-align: left;    
}


<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jose</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Alberto</td>
            <td>32</td>
        </tr>
    </tbody>
</table>
+18
source

CSS for horizontal separators:

th, td {
  border-bottom: 1px solid #ddd;
}

see: https://www.w3schools.com/css/css_table.asp

0
source

More articles:


All Articles