如何设置只有垂直单元格间距的表格？答案

【问题标题】：How to style table with only vertical cell spacing?如何设置只有垂直单元格间距的表格？
【发布时间】：2010-08-12 10:28:12
【问题描述】：

我的 HTML 中有一个表格，但我只想要垂直间距，因为水平 25px 看起来不正确。我在 HTML 中看不到执行此操作的属性，这可能吗？
提前致谢，
院长

编辑：我有一张表格，其单元格间距一直为 25 像素。我只想要 25px 的垂直单元格间距。

【问题讨论】：

我不明白。能改一下吗？
看看我的编辑，我希望这让它更容易理解。

标签： html html-table

【解决方案1】：

cellpadding 属性（我假设您正在谈论）只会采用一个数字并将其用作单元格壁和内容之间的像素。您必须想出一个解决方法，根据您的布局，您可能想要使用<div>，或者如果单元格周围没有任何边框，您可以添加style='padding-bottom:25px' 以创建相同的效果.

【讨论】：

【解决方案2】：

只需在

部分中添加以下内容，就在页面的 head 标签打开之后：这应该可以完成工作：

<style type="text/css">
td { margin: 25px 0px; } /* tells the table to have 25 
px on top and bottom, zero px on left and right */
</style>

【讨论】：

【解决方案3】：

Cleaner <table> 元素解决方案（对内联样式很有用）。

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

th {
  background-color: blue;
  color: white;
}

th, td {
  width: 150px;
  border: 1px solid black;
  padding: 5px;
}

<table>
  <tbody>
    <tr>
      <th>Vehicle     <th>No. of Wheels  <th>Rep (0-10)
    <tr>
      <td>Skateboard  <td>4              <td>7
    <tr>
      <td>BMX         <td>2              <td>6
    <tr>
      <td>Unicycle    <td>1              <td>-1

【讨论】：

【解决方案4】：

我发现了这个：

border-bottom: 25px solid transparent;

注意 IE6 has a problem with transparency.

【讨论】：