html table border spacing
Question
I am trying to give spacing between columns in a html table,
Actually, I thought I just wanted spacing at the right side of each column.
So far, I only managed to use border-spacing property to add spacing between each columns. When I use this property, I realise there is spacing on both the left side and right side of each column. Is it possible to use css rules such that only spacing is applied at the right side?
I have a code snippet of my current method below:
.table{ border-spacing: 10px 0; }
<!DOCTYPE html> <html> <head> <title>html table</title> </head> <body> <!-- Start your code here --> <table class="table" > <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td><input type="text" value="some text"/></td> <td><input type="text" value="another text"/></td> <td><input type="text" value="looks like you giving"/></td> </tr> </table> <!-- End your code here --> </body> </html>
Thanks for the help.
1 answers
solution1
0 2018-06-12 16:27:27
Well you can't apply spacing on specific parts of the table, and you can't put margins on td nor td , a somewhat solution to this would be to use padding on <td> .
table { border-spacing: 0; } td { padding-right: 10px }
<!--border for refrence --> <table border="1"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td><input type="text" value="" /></td> <td><input type="text" value="" /></td> <td><input type="text" value="" /></td> </tr> </table>
Or margins on direct children using >*
table { border-spacing: 0; } td>* { margin-right: 10px }
<!--border for refrence --> <table border="1"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td><input type="text" value="" /></td> <td><input type="text" value="" /></td> <td><input type="text" value="" /></td> </tr> </table>
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.