Menu
I need a way to show only the vertical lines in a table.
I've tried to add border-left and border-right, both with :1px solid #red;, to both the table and the separate td's. but it won't add the border color.
So what I'm looking for is an easy way to create these vertical lines.
374
In APA style, tables have no vertical lines. Horizontal lines are only used at the top and bottom and to separate major sections of the table. Do not use horizontal lines to separate rows of data.
Alternatively referred to as a column separator or row separator, Grid lines or gridlines are the light gray lines that divide each of the cells, rows, and columns in a spreadsheet.
To make a vertical line, use border-left or border-right property. The height property is used to set the height of border (vertical line) element. Position property is used to set the position of vertical line. Example 1: It creates a vertical line using border-left, height and position property.
Table without Border is one of the ways of table representation. The table format can also be achieved using other HTML tags like ul > li, div, etc., but the use of a table for tabular structure reduces the styling work while the use of div for tabular design is increasing due to the responsive design approach.
Use border-collapse on your <table> than border-left and border-right on your <td>.
table { border-collapse: collapse; } tr { border: none; } td { border-right: solid 1px #f00; border-left: solid 1px #f00; }<table> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </table>Expounding upon Simon's answer for those who want vertical lines within a table but not different columns. Note: you have to do it exactly as specified in his answer. The table itself needs border-collapse:collapse or multiple lines will show, the tr needs border:none or an outline will show, and the td border-left/right/top/bottom part is obvious.
<html> <head><style> table { border-collapse:collapse; } tr { border:none; } th, td { border-collapse:collapse; border: 1px solid black; padding-top:0; padding-bottom:0; } .verticalSplit { border-top:none; border-bottom:none; } .verticalSplit:first-of-type { border-left:none; } .verticalSplit:last-of-type { border-right:none; } </style></head> <body><table> <tr><td> <table><tr> <td class="verticalSplit">A</td> <td class="verticalSplit">B</td> </tr></table></td> <td>C</td></tr> <tr><td>D</td><td>E</td></tr> </table></body> </html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
