设置 TD 的 CSS 单元格间距

Question

所以我有这张桌子。我知道我不应该使用表格进行布局，但在这种情况下我被迫这样做。

我需要设置特定 TD 单元格间距的样式（具有

.ritey

类的 TD）。我知道我必须以 TABLE 为目标来设置其单元格间距，但我不希望其他 TD 受到影响。我只需要设计这个单个 TD 的样式。

有什么办法可以做到这一点吗？

这是使用 MS Paint 绘制的快速粗略草图，我希望这能解释我所需要的：

整体布局中会有多行（多个TR）。在这个问题中我只显示一行。我需要所有列（所有 TD）保持不变，除了

.ritey

之外。我希望

.ritey

周围有 10 像素的边距（边距，而不是填充）。我希望这能解释得更好！

.

这是我在 HTML 中得到的内容。我尝试过

td.ritey { border-spacing:10px; }

但似乎不起作用。

  <table width='100%' border='0' cellspacing='1' cellpadding='3' class='postable'>
  <tr>
  <td valign='middle' class='row4 uname' colspan='2'>
  <div class='name'>
   <a href='#'>Guest</a>
  </div>
  </td>
  </tr><tr>
  <td width='100%' valign='top' class='ritey'>
        <div class='postcolor'>
         Post content
        </div>
  </td><td valign='top' class='lefty'>
    <div class='postdetails'>
    Details
</div>
  </td>
  </tr></table>

非常感谢任何帮助。

Answer 1

请参阅小提琴代码和演示

小提琴：http://jsfiddle.net/kDKEw/2/

演示：http://jsfiddle.net/kDKEw/2/embedded/result/

HTML：

<table cellspacing="1" cellpadding="3" border="1" width="100%" class="postable">
  <tbody><tr>
  <td valign="middle" colspan="2" class="row4 uname">
  <div class="name">
   <a href="#">Guest</a>
  </div>
  </td>
  </tr><tr style="height: 36px;">
  <td width="100%" valign="top" class="ritey" style="width: 90%; position: absolute; margin: 4px;">
        <div class="postcolor">
         Post content
        </div>
  </td><td valign="top" class="lefty" style="float: right; width: 6%;">
    <div class="postdetails">
    Details
</div>
  </td>
  </tr>
</tbody>
</table>

SS：

根据图像插图更新了Fiddle（https://i.sstatic.net/YBXCK.png）：由deathlock

提供

小提琴：http://jsfiddle.net/7xfxF/1/

演示：http://jsfiddle.net/7xfxF/1/embedded/result/

SS：

Answer 2

在 CSS 中，您可以使用

padding

表示单元格填充，使用

border-spacing

表示单元格间距。这是工作代码：

编辑

我根据你提供的图片修改了CSS。我为

postcolor

类添加了额外的样式。请参阅更新的 CSS 和 Fiddle。我还更新了截图。

如果您希望边框折叠，请将

border-collapse

更改为

collapse

并删除

border-spacing

属性。

<style type="text/css">    
    table.postable {
      border-collapse: separate !important; 
      border-spacing: 1px;        
    }
    table.postable td {
      border:1px solid black;      
      padding: 5px;
    }
    td.ritey {
      border: 0px !important;
      padding: 10px 5px 10px 5px !important;
    }
    td.lefty {  
      padding: 10px 5px 10px 5px !important;    
    }
    div.postcolor {
      margin: 3px;
      padding: 10px;
      border: 1px solid black;   
    }         
</style>
<table width='100%' class='postable'>
    <tr>
       <td colspan='2'>
          <div class='name'>
             <a href='#'>Guest</a>
          </div>
       </td>
    </tr>
    <tr>
       <td width='100%' valign='top' class='ritey'>
          <div class='postcolor'>
             Post content
          </div>
       </td>
       <td valign='top' class='lefty'>
          <div class='postdetails'>
             Details
          </div>
       </td>
   </tr>
</table>

输出： 请参阅 this jsFiddle 进行演示。

Answer 3

.demo 
{
color:red;
background-color:skyblue;
border:2px solid black;
margin-left:5px;
}

<h1 class="demo">Yash</h1>

.demo 
{
color:red;
background-color:skyblue;
border:2px solid black;
margin-left:5px;
}

<h1 class="demo">Yash</h1>

<!-- begin snippet: js hide: false console: true babel: false -->