Add border-bottom / border-top to table row using CSS andrey понедельник, 21 июля 2014 г. No Comment


We can do it with table's border-collapse property.
Collapse

In which both the space and the borders between table cells collapse. So, there is only one border and no space between cells.

Just change the table border-collapse style into collapse using this following css
table {
border-collapse: collapse;
}
Now the each cells are independent. So, you can apply border-bottom or border-top style for each td like bellow CSS.

To Set border-bottom,
.border_bottom {
border-bottom: 1px solid #000;
}
To Set border-top,
.border_top {
border-top: 1px solid #000;
}
LIVE DEMO
Have any doubt? Feel free to comment here!!!


We can do it with table's border-collapse property.
Collapse

In which both the space and the borders between table cells collapse. So, there is only one border and no space between cells.

Just change the table border-collapse style into collapse using this following css
table {
border-collapse: collapse;
}
Now the each cells are independent. So, you can apply border-bottom or border-top style for each td like bellow CSS.

To Set border-bottom,
.border_bottom {
border-bottom: 1px solid #000;
}
To Set border-top,
.border_top {
border-top: 1px solid #000;
}
LIVE DEMO
Have any doubt? Feel free to comment here!!!

by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

No Comment