'HTML table border spacing

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.

htmlcss


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zohini

Related Questions