Space between two rows in a table using CSS?
The space between two rows in a table can be done using CSS border-spacing and border-collapse property. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of table is collapse or not. The border-spacing attribute can only be used if border-collapse attribute is set to separate. Example:
html
<!DOCTYPE html><html> <head> <style> table { border-collapse: collapse; } th { background-color:green; Color:white; } th, td { width:150px; text-align:center; border:1px solid black; padding:5px } .geeks { border-right:hidden; } .gfg { border-collapse:separate; border-spacing:0 15px; } h1 { color:green; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h2>Row spacing in a table</h2> <table> <tr> <th>Employee ID</th> <th>Name</th> <th>Gender</th> <th>Age</th> </tr> </table> <table class = "gfg"> <tr> <td class = "geeks">10001</td> <td>Thomas</td> <td>M</td> <td>32</td> </tr> <tr> <td class = "geeks">10002</td> <td>Sally</td> <td>F</td> <td>28</td> </tr> <tr> <td class = "geeks">10003</td> <td>Anthony</td> <td>M</td> <td>24</td> </tr> </table> </center> </body></html> |
Output: 
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Please Login to comment...