CODEWITHSUNDEEP
htmlcsssass
alexmngn
alexmngn

Reputation: 9597

Table with spacing before/after separation line between rows

I'm trying to build a HTML table with separation line between rows. My main concern is mainly the fact I need to add a padding left/right in my tbody. I tried different things, such:

Here is my table:

enter image description here

And this is what I need to do:

enter image description here

Codepen for the source: http://codepen.io/anon/pen/gojuw

Do you have any suggestion?

Thanks

Upvotes: 3

Views: 96

Answers (2)

MickyScion
MickyScion

Reputation: 516

well i try this in my codeand it works fine it shows as you want

<div id="table_prove">
    <table>
        <thead>
            <tr><td></td><td>Item 1</td><td>Item 2</td><td>Item 3</td><td></td></tr>
        </thead>
        <tbody>
            <tr><td></td><td>Item 1</td><td>Item 2</td><td>Item 3</td><td></td></tr>
            <tr><td></td><td>Item 1</td><td>Item 2</td><td>Item 3</td><td></td></tr>
            <tr><td></td><td>Item 1</td><td>Item 2</td><td>Item 3</td><td></td></tr>
        </tbody>
    </table>
</div>

as you can see i add a "" that separates your first item and the last from the table, you can adjust the size of your table and the td's, i hope i helped you

Upvotes: 0

dwitvliet
dwitvliet

Reputation: 7671

How about setting up a left and right border in the first and last <td>, respectively? See working example in here. It works something like this:

HTML:

<div id="table_wrapper">
    <table>
        <thead>
            <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>
        </thead>
        <tbody>
            <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>
            <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>
            <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>
        </tbody>
    </table>
</div>

CSS:

#table_wrapper {
    border: 1px solid #ddd;
}
table {
    border-collapse: collapse;
}
thead td {
    background-color: #eee;
}
thead td:first-child {
    border-left: 20px solid #eee;
}
thead td:last-child {
    border-right: 20px solid #eee;
}
tbody td {
    background-color: white;
}
tbody td:first-child {
    border-left: 20px solid white;
} 
tbody td:last-child {
    border-right: 20px solid white;
}

Upvotes: 1

Related Questions