如何增加html中的表列之间的距离？ [英] How to increase the distance between table columns in html?

问题描述

我想说，我想创建一个单行表，每列之间有50像素，但顶部和底部都填充10像素。

Let's say I wanted to create a single-rowed table with 50px in between each column but 10px padding on top and the bottom.

我该如何做HTML / CSS？

How would I do this in HTML/CSS?

推荐答案

不需要伪造< td> 。请改用 border-spacing 。应用方式如下：

No need for fake <td>. Make use of border-spacing instead. Apply it like this:

HTML ：

<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
</table>

CSS：

table {
  border-collapse: separate;
  border-spacing: 50px 0;
}

td {
  padding: 10px 0;
}

查看 in action

See it in action

这篇关于如何增加html中的表列之间的距离？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！