Question

我试图设置下表的样式，但我不能避免每个单元格的样式。在所有细胞之间应该有一条边界线，除了来自例如细胞的细胞。第四栏。另外我试图让表斑马条纹的两个部分（它没有在下面的布局中显示）。

┌───┬───┬───┐    ┌───┬───┬───┐
├───┼───┼───┤    ├───┼───┼───┤
├───┼───┼───┤    ├───┼───┼───┤
├───┼───┼───┤    ├───┼───┼───┤
├───┼───┼───┤    ├───┼───┼───┤
├───┼───┼───┤    ├───┼───┼───┤
├───┼───┼───┤    ├───┼───┼───┤
├───┼───┼───┤    ├───┼───┼───┤
└───┴───┴───┘    └───┴───┴───┘

最有效的方法是什么？

更新。我接受了Jaime的回答并修改了建议的代码：

<style>
.tbl            { border-collapse:collapse; }
.tbl tr         { background-color: red; }
.tbl tr.stripe  { background-color: green; }
.tbl td         { border:solid 1px black; }
.tbl td.none    { border-style:none; background-color: white; }
</style>

<table class="tbl">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="none">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr class="stripe">
<td>1</td>
<td>2</td>
<td>3</td>
<td class="none">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>

不确定明确将td.none背景设置为白色是否正确，但我不知道是否可以指定元素的背景应与页面的背景相同。

Answer 1

这是一个可能的解决方案：

<style>

.tbl {
    border-collapse:collapse;
}

.tbl td {
    border:solid 1px red;
}

.tbl td.none {
    border-style:none;
}

</style>

使用html：

<table class="tbl">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="none">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>

Answer 2

由于我不知道您的HTML标记，因此我不知道您是否为id设置了单独的<TR>，或者您是否保留了常见的class属性，这会让你做像Jaime建议的那样。

如果没有，并且你已经依赖于jQuery，你可能会喜欢这样的东西（如果我理解正确的话）：

<html>
    <head>
        <style type="text/css">
        table { border-collapse: collapse; }
        td { border: solid grey 1px; }
        td.none { border: none; }
        </style>
        <script src="http://code.jquery.com/jquery-1.5.js"></script>
    </head>
    <body>
        <table>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
        </table>
        <script>$("td:nth-child(4)").addClass("none");</script>
    </body>
</html>

Answer 3

CSS 3将会这样做：

td:nth-child(4) {
   ...styles that will apply to the fourth TD...
}

Answer 4

列组http://www.w3.org/TR/html4/struct/tables.html#colgroups可能会帮助您实现所需，因为您可以为特定列指定样式。这里提供了一个示例：http://www.w3.org/TR/html4/struct/tables.html#sample

HTML表格中的一列没有水平边框线

4 个答案: