我正在设计这个论坛布局，我想出了一个很好的设计来绘制论坛表格，但是，我不确定这是否可以在 HTML/CSS 中轻松完成。
在我继续绘制整个布局之前，我需要知道这是否可以实现以及如何实现，否则，我将不得不放弃这种效果并重新考虑......
例如，我目前的设计是这样的：
此示例中的行具有相同的高度，但这只是一个示例。真正的表格实际上会有不同的行高，代码需要考虑到这一点......
如何做到这一点？
【问题讨论】：
标签： html css html-table
CSS 可以很容易地完成类似的操作，前提是您不必随着表格大小的增加而垂直缩放渐变。下面是一个示例，您可以使用它来获得上述效果。
更新：不知何故，我没有看到斜面（我想我不得不怪它太晚了，而且我的视力太模糊了）。我必须放大才能真正看到它们，但我已经更新了我的解决方案以适应它们。您需要添加一个额外的“div”标签才能使此解决方案正常工作，但这是可能的，尽管我认为它的工作原理与您的图像显示的程度不一样。不过，它会工作得相当不错。下面我包含了一些 jQuery 脚本，它将消除对额外 <div /> 标记的需要。
对于标记，您可以使用如下内容：
<table cellspacing="0">
<tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
<tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
<tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
</table>
在你的样式表中你会使用这样的东西：
td {
border: 1px solid #777;
}
.bevel {
background: url('img.png') top left repeat-x;
margin: -1px;
border-top: 1px solid #fbfbfb;
border-left: 1px solid #fbfbfb;
border-right: 1px solid #bfbfbf;
border-bottom: 1px solid #e8e8e8;
}
.side {
width: 30px;
}
.main {
width: 170px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
对于图像，使其宽度为 1 像素。它会重复自己以适应单元格的宽度。如果你想让渐变垂直拉伸，那你就不走运了。 CSS 不能缩放图像，只能重复它们。为了制作垂直缩放的背景图像，您需要使用噩梦般的标记或某种 JavaScript 才能使其工作。
要摆脱<div /> 标签汤，您可以使用jQuery 插入标签，这样您就不会弄乱您的源代码。你需要做的就是在<td />标签中添加一个'outerBevel'类，然后调用这个jQuery脚本（如果你正在使用jQuery。我相信其他JavaScript API可以做类似的事情）：
$('.outerBevel').wrapInner('<div class="bevel"></div>');
【讨论】：
对于布局，标准的 HTML table 标签可以完成所有这些工作，并且也适合使用它。
要获得所需的边框效果，请在此处查看不同的 CSS 边框选项：http://www.w3schools.com/css/css_reference.asp#border
【讨论】：
你可能想做这样的事情：
table#mytable td {
border-style: inset;
border-width: 3px; /* or whatever width you want */
}
【讨论】：