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

【问题标题】：One column in HTML table to have no horizontal border linesHTML 表格中的一列没有水平边框线
【发布时间】：2019-01-25 03:53:34
【问题描述】：

我正在尝试为下表设置样式，但我无法避免为每个单元格设置样式。除了来自例如的单元格之外，所有单元格之间应该有一条边界线。第 4 列。此外，我正在尝试将表斑马条纹的两个部分（它没有显示在下面的布局中）。

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

最有效的方法是什么？

更新。我接受了 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 背景显式设置为白色是否正确，但我不知道是否可以指定元素的背景应与页面的背景相同。

【问题讨论】：

看起来像两张表，也许你应该创建两张表
您可能会在表格中使用col 和colgroup HTML 标记，并基于这些标记进行样式设置。我会测试并实际回答，但现在没有时间。
@Luke - 两个表格不会做，因为当表格调整大小时，例如左表的第一行可以占用 3 行，右表第一行的文本 - 1 行，因此行不会对齐。
@Stephen P - 我花了几个小时玩col，但我无法让它工作。我正在尝试将斑马纹表的两个部分都涂上条纹，而我只能对每个单元格进行样式化。

标签： html css html-table

【解决方案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>

【讨论】：

【解决方案2】：

由于我不知道您的 HTML 标记，我不知道您是否为您的 <TR> 设置了单独的 ids，或者您是否保留了一个共同的 class 属性，这会让您做一些事情就像詹姆建议的那样。

如果没有，并且您已经依赖 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>

【讨论】：

这将放弃第四列的边界。如果您需要每隔四列执行一次，请将td:nth-child(4) 更改为td:nth-child(4n)。
谢谢，伙计，但我没有使用 jquery。应该开始学习吧。据我了解，如果没有 jquery，您的答案将无法工作？
确实不会，而且仅仅为了这件事使用 jQuery 很可能是矫枉过正。正如 DA 所指出的，它在纯 CSS 中可用，但浏览器支持一般（IE9+、FF3.5+、Safari 3+）。对于一个面向公众的网络，我不会指望它在纯 CSS 中使用。

【解决方案3】：

CSS 3 会做到这一点：

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

【讨论】：

我很乐意使用你的答案，DA，但它似乎在 IE 中不起作用。

【解决方案4】：

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

【讨论】：

然而，列组似乎无法满足这一特殊要求 - 我在发布问题之前检查了它。