Question

我试图在html表中的列之间给出间距

实际上，我以为我只想在每一列的右侧放置间距。

到目前为止，我只设法使用border-spacing属性来添加每列之间的间距。当我使用这个属性时，我意识到每列的左侧和右侧都有间距。是否可以使用css规则，只在右侧应用间距？

我有以下方法的代码片段：

＆＃13;

.table{
  border-spacing: 10px 0;
}

＆＃13;

<!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>

＆＃13;

感谢您的帮助。

Answer 1

嗯，你不能在表格的特定部分上应用间距，而且你不能在td或td上加上边距，对此有点解决方法是使用在<td>填充。

＆＃13;

table {
  border-spacing: 0;
}

td {
  padding-right: 10px
}

＆＃13;

<!--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>

＆＃13;

使用>*

的直接儿童的边距

＆＃13;

table {
  border-spacing: 0;
}

td>* {
  margin-right: 10px
}

＆＃13;

<!--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>

＆＃13;

html表边框间距

1 个答案: