CODEWITHSUNDEEP
css
Alvaro
Alvaro

Reputation: 273

CSS Space between rows separated by a line

I found a similar question here

Space between two rows in a table?

but I don't visualize the answer, and each answer was different, sounded like there was no agreement

I am displaying dynamically a table and just need to tweak the CSS so that there is space between the rows, separated by a line, that is all. I dont want that the rows look squeezed against each other. What they say is padd the cells. I hardcoded into the html table the cellpadding and it has no effect whatsoever. The only thing that really changes the look is cellspacing but that has a bad optical effect.

I don't understand how they write the answer here below since they use so many braces and as far as I know, you create a class in the CSS file starting with a '.' and 2 braces and put all the stuff in, but they wrote this:

table tr{ float: left width: 100%; }

tr.classname { margin-bottom:5px; }

but they start without declaring the class and when they are in the middle they create the class for the tr. I dont understand that.

Does anyone know how to put that code in a correct way that makes sense ?

Upvotes: 3

Views: 24429

Answers (2)

jrthomas
jrthomas

Reputation: 101

You might try something like this for your CSS to have well-spaced rows separated by horizontal lines:

table {
    border-collapse: collapse; 
}

td {
    padding: 10px 0;     /* 10px top & bottom padding, 0px left & right */
    border-width: 1px 0; /*  1px top & bottom border,  0px left & right */
    border-color: #000;
    border-style: solid;
}

Each row will have a border both above and below, with 10 pixels of spacing both above and below cell content.

If you don't want borders on the very top & bottom of the table, you could alter the CSS a bit:

table {
    border-collapse: collapse;
}

td {
    padding: 10px 0; /* 10px top & bottom padding, 0px left & right */
}

.separating_line {
    border-top: 1px #000 solid; /* top border only */
}

Then give all rows but the first the .separating_line class, like this:

<table>
    <tr>
        <td>content</td>
    </tr>
    <tr class="separating_line">
        <td>content</td>
    </tr>
    <tr class="separating_line">
        <td>content</td>
    </tr>
</table>

The CSS I wrote could be rewritten like in your original post:

tr.separating_line {
    border-top: 1px #000 solid; /* top border only */
}

so that this style only gets applied to a tr element with the separating_line class, which might be useful if you wanted to use the separating_line class to style different elements differently.

tr.separating_line {
    border-top: 1px #000 solid; /* top border only */
}
div.separating_line {
    border-top: 3px #F00 dashed;
}

I apologize if I misunderstood your question, but hopefully my answer helped somewhat. =)

Upvotes: 9

Yasen Zhelev
Yasen Zhelev

Reputation: 4045

in this case tr.classname mean that every tr elment with class="classname" will inherit the CSS

like

a.info { }

will work for all link with class="info"

Upvotes: 1

Related Questions