Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TABLE with no vertical cell borders

I would like my HTML table to only show the horizontal cell borders. Is there a way where I can hide the vertical cell borders?

like image 225
user1175551 Avatar asked Jun 28 '12 02:06

user1175551


People also ask

How do I remove vertical borders from a table?

to select the table and show the Table Design tab. On the Table Design tab, click the arrow next to Borders and then click No Border .

How do you remove borders from a table cell?

Remove a cell borderClick Home > the Borders arrow > Erase Border, and then select the cells with the border you want to erase.

How can we avoid the borders seen between the table cells?

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse .

How do I remove horizontal borders from a table?

Remove a horizontal lineOn the Home tab, click the arrow next to the Borders and Shading button, and click No Border.


1 Answers

You can add strictly horizontal border lines by styling tr tags via CSS.

Example CSS:

tr {
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    border-collapse: collapse;
}​

Of course, you can use any border style/width/color you choose.

JS Fiddle: http://jsfiddle.net/XPyzM/

like image 102
JSW189 Avatar answered Sep 21 '22 03:09

JSW189