简体   繁体   中英

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?

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/

table, th, td {
  border-left: none;
  border-right: none;
}

假设您使用的是旧式<table border="1"> ,请将其<table border="1" rules="rows">

<style>
  td {border-left: 1px solid black;}
</style>

I finally figured this out, you need to put border-collapse property in style of table !

CSS:

table {
    border-collapse: collapse;
}

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

And your table will only have horizontal lines!

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

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

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

<TABLE 
    BORDER=1 CELLPADDING=3 CELLSPACING=1 
    RULES=COLS FRAME=BOX
>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM