Html 设置TD的CSS单元格间距

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

我需要设计一个特定TD的单元格间距，TD与class.rity的间距。我知道我必须以表格为目标来设置单元格间距，但我不希望其他TDs受到影响。我只需要设计这个单TD

有没有办法做到这一点

这是MS Paint的快速草图，我希望这能解释我需要什么：

在整体布局中将有多行多TR。在这个问题中，我只显示一行。我需要所有列所有TDs保持不变，除了.ritey。我想要。礼节的周围有10像素的边距，边距，而不是填充。我希望这能更好地解释

这是我在HTML中得到的。我试过td.ritey{边框间距：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>

非常感谢您的帮助。

在CSS中，您可以使用填充作为单元格填充，使用边框间距作为单元格间距。以下是工作代码：

编辑

我根据你提供的图片修改了CSS。我为postcolor类添加了额外的样式。查看更新的CSS和Fiddle。我还更新了截图

如果要折叠边框，请将“边框折叠”更改为“折叠”，并删除“边框间距”特性

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

输出： 请看演示

在CSS中，您可以使用填充作为单元格填充，使用边框间距作为单元格间距。以下是工作代码：

编辑

我根据你提供的图片修改了CSS。我为postcolor类添加了额外的样式。查看更新的CSS和Fiddle。我还更新了截图

如果要折叠边框，请将“边框折叠”更改为“折叠”，并删除“边框间距”特性

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

输出：

---

请看演示

有关代码和演示，请参见fiddle

小提琴：

演示：

HTML:

SS:

更新小提琴，如图所示：由deathlock提供

小提琴：

演示：

SS:

---

有关代码和演示，请参见fiddle

小提琴：

演示：

HTML:

SS:

更新小提琴，如图所示：由deathlock提供

小提琴：

演示：

SS:

---

---

不，你们用边框间距来表示单元格间距。不过你们也可以用边距，是吗？是的，我试过了。很遗憾，边距似乎不起作用。边距在表格单元格中的应用方式与边框间距不同。我以前以为我已经成功地使用了边距，但边框间距更合适。谢谢你的提示，我相应地更新了我的答案。不，你用边框间距来表示单元格间距。不过你也可以用边距，不是吗？是的，我试过了。很遗憾，边距似乎不起作用。边距在表格单元格中的应用方式与边框间距不同。我以前以为我已经成功地使用了边距，但边框间距更合适。谢谢你的提示，我相应地更新了我的答案。如果这是一个一次性的更改，为什么不将其嵌入到td中？单元格间距=0。你已经在用width和valign做这个了。亲爱的，请看我的答案，如果我落后了，请告诉我。你是什么意思，你被迫使用表格进行布局？表格对布局没有css做不到的事情。@Jeff:这似乎是个问题：即使将它嵌入到TD中也不会使它工作。Dinesh:好的：|@iambriansreed:由于工作需要，这是一个我无法更改的模板。我知道使用DIV更好，但无论如何我都无法将其更改为DIV。因此，在任何情况下，我都必须使用TABLE。如果这是一次性更改，为什么不将其嵌入到td中？单元格间距=0。你已经在用width和valign做这个了。亲爱的，请看我的答案，如果我落后了，请告诉我。你是什么意思，你被迫使用表格进行布局？表格对布局没有css做不到的事情。@Jeff:这似乎是个问题：即使将它嵌入到TD中也不会使它工作。Dinesh:好的：|@iambriansreed:由于工作需要，这是一个我无法更改的模板。我知道使用DIV更好，但无论如何我都无法将其更改为DIV。因此我必须在任何情况下使用TABLE。为什么要浮动表单元格？因为一旦边距设置为ritey。问题是礼节上只有空格，所以在我使用float的地方设置细节td。好的，这似乎在进步。。。我认为立场：绝对；这是一个决定因素，因为当我去掉它时，边距就不起作用了。然而，不幸的是，添加位置：absolute似乎破坏了整体布局…您的确切要求是什么？告诉我们，这样我们可以帮助您实现所需的布局。我添加了一个插图，我希望这可以解释！：为什么要浮动表格单元格？因为一旦边距设置为ritey。问题是礼节上只有空格，所以在我使用float的地方设置细节td。好的，这似乎在进步。。。我认为立场：绝对；是

---

这是一个决定因素，因为当我去掉它时，边距就不起作用了。然而，不幸的是，添加位置：absolute似乎破坏了整体布局…您的确切要求是什么？告诉我们，这样我们可以帮助您实现所需的布局。我添加了一个插图，我希望这可以解释！：