所以我有这张桌子。我知道我不应该使用表格进行布局,但在这种情况下我被迫这样做。
我需要设置特定 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>
非常感谢任何帮助。
请参阅小提琴代码和演示
小提琴: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:
在 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 进行演示。
.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 -->