如何增加 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 50 pixels in between each column, but 10 pixels padding on top and the bottom.

我将如何在 HTML/CSS 中执行此操作?

How would I do this in HTML/CSS?

推荐答案

不需要任何伪造的 s.使用 border-spacing 代替.像这样应用它:

There isn't any need for fake <td>s. 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;
}

查看实际操作.

See it in action.

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