经过一番研究，我找不到这个问题的答案。有这个，但它并没有真正回答我的问题。我想在 CSS 中“删除”一个完整的 HTML 表格行，而不仅仅是其中的文本。有可能吗？从我链接的示例中，似乎 tr 样式甚至在 Firefox 中都不起作用。（无论如何，文本装饰仅适用于文本 afaik）
问问题
74598 次
9 回答
109
哦，是的，是的！
CSS：
table {
border-collapse: collapse;
}
td {
position: relative;
padding: 5px 10px;
}
tr.strikeout td:before {
content: " ";
position: absolute;
top: 50%;
left: 0;
border-bottom: 1px solid #111;
width: 100%;
}
HTML：
<table>
<tr>
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
<tr class="strikeout">
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
<tr>
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
</table>
于 2013-10-29T23:05:44.670 回答
39
我的回答（如下）说这是不可能的。正如@NicoleMorganErickson 所指出的，我错了。请参阅她的回答（并投票！）以了解如何做到这一点。简而言之，您使用:before伪类来创建一个元素，该元素在单元格中间、内容上方绘制边框：
table { border-collapse:collapse } /* Ensure no space between cells */
tr.strikeout td { position:relative } /* Setup a new coordinate system */
tr.strikeout td:before { /* Create a new element that */
content: " "; /* …has no text content */
position: absolute; /* …is absolutely positioned */
left: 0; top: 50%; width: 100%; /* …with the top across the middle */
border-bottom: 1px solid #000; /* …and with a border on the top */
}
（原答案）
不，仅使用 CSS 和语义表标记是不可能的。正如@JMCCreative 建议的那样，可以使用多种方式在视觉上将一条线放置在您的行上。
相反，我建议使用 、 和/或 的组合color来使整行明显不同。（我个人强烈地将文本“淡出”为比普通文本更接近背景的颜色，并将其设为斜体。）background-colorfont-style:italictext-decoration:line-through
于 2011-01-06T20:38:14.600 回答
13
tr {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGCQBAAAIwAbDJgTxgAAAABJRU5ErkJggg==');
background-repeat: repeat-x;
background-position: 50% 50%;
}
我使用http://www.patternify.com/生成 1x1 图像 url。
于 2013-10-09T07:42:11.400 回答
11
最简单的方法是background-image在tr其及其后代单元格上使用 a （或简单地background-color在这些单元格上使用透明）。
html:
<table>
<thead>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>First row, One-One</td>
<td>First row, One-Two</td>
<td>First row, One-Three</td>
</tr>
<tr class="empty">
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
CSS：
table {
empty-cells: show;
}
th, td {
width: 6em;
height: 2em;
line-height: 2em;
border: 1px solid #ccc;
}
tr.empty,
tr.empty td {
background: transparent url('http://davidrhysthomas.co.uk/linked/strike.png') 0 50% repeat-x;
}
于 2011-01-06T20:39:43.720 回答
9
2020 年 2 月 3 日编辑：
在最近的一个bootstrap 4.3 ServiceNow Angular.js项目中，我发现自己不得不进行一些更改，而是使用了以下 css，类似于 Revoman 的经验：
tr.strikeout td.strike-able:before {
content: " ";
position: absolute;
display: inline-block;
padding: 12px 10px;
left: 0;
border-bottom: 2px solid #d9534f;
width: 100%;
}
原帖：
我喜欢Nicole Morgan Erickson 的回答，但如果您逐字执行他的解决方案，可能会产生副作用。我添加了一些小的调整来保持这个洁净，在下面......这样我们就不会用这个 css 全局修改每个表或每个 td。
我还希望行上的一个按钮来删除该行，但为了可见性，我不想用按钮删除列。我只是想删除该行的其余部分。为此，我这样做是为了让每一个想要能够显示删除的列都必须通过标记一个类来声明它。 在此迭代中，您需要将表格标记为可罢工，并将每个 td 标记为可罢工；但是您可以通过不影响任何不可删除的表来获得安全性，并且您可以控制要删除的列。
CSS：
table.strike-able {
border-collapse: collapse;
}
table.strike-able tr td {
position: relative;
padding: 3px 2px;
}
table.strike-able tr th {
position: relative;
padding: 3px 2px;
}
table.strike-able tr.strikeout td.strike-able:before {
content: " ";
position: absolute;
top: 50%;
left: 0;
border-bottom: 2px solid #d9534f;
width: 100%;
}
用法：
<table class="strike-able" id="Medications" data-item-count="@Model.Medications.Count">
<tr>
<th>
Some Column
</th>
<th>
Command Column
</th>
</tr>
<tr class="strikeout">
<td class="strike-able"></td>
<td>Button that Toggles Striking Goes Here (active)</td>
</tr>
<tr>
<td class="strike-able"></td>
<td>Button that Toggles Striking Goes Here</td>
</tr>
</table>
最后，由于我将它与 Bootstrap 一起使用，并且将删除视为危险的事情，因此我对颜色进行了一些格式化以匹配我的使用。
于 2015-07-22T21:40:12.143 回答
8
编辑：正如@Mathieu M-Gosselin 在评论中指出的那样，这实际上将行放在文本后面。 也就是说，如果您的线条与您的文本颜色相同，或者您使用的是小字体，这仍然可以很好地工作。
值得一提的是，这是一种非常有效的方法，可以在不使用伪元素的情况下在纯 CSS 中完成。您可以通过调整 来更改删除线的粗细background-size。
table {
border-collapse: collapse;
}
td {
width: 100px
}
.strikethrough {
background: repeating-linear-gradient(
180deg,
red 0%,
red 100%
);
background-size: 100% 2px;
background-position: center;
background-repeat: no-repeat;
}<table>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
<tr class="strikethrough">
<td>Foo Strike</td>
<td>Bar Strike</td>
<td>Baz Strike</td>
</tr>
</table>于 2020-03-13T12:50:46.047 回答
3
@NicoleMorganErickson，我喜欢你的回答，但我无法让三振仅影响应用的行。此外，我需要将它应用于多行，因此我将您的解决方案修改为一个类。
CSS：
tr.strikeout td:before {
content: " ";
position: absolute;
display: inline-block;
padding: 5px 10px;
left: 0;
border-bottom: 1px solid #111;
width: 100%;
}
于 2014-05-14T21:35:51.740 回答
1
是的你可以。在该行的第一个单元格中，您创建一个包含 HR 的 div。将 div 向左浮动并将其宽度指定为其包含元素的百分比，在本例中为表格单元格。它将在该行中的表格单元格中尽可能宽地延伸，如果您愿意，甚至可以超出表格的宽度。
这对我有用：
<style>
.strikeThrough {
height:3px;
color:#ff0000;
background-color:#ff0000;
}
.strikeThroughDiv {
float:left;
width:920%;
position:relative;
top:18px;
border:none;
}
</style>
<table width="900" border="1" cellspacing="0" cellpadding="4">
<tr valign="bottom">
<td>
<div class="strikeThroughDiv"><hr class="strikeThrough"/></div>
One
</td>
<td>
<label for="one"></label>
<input type="text" name="one" id="one" />
</td>
<td>
<label for="list"></label>
<select name="list" id="list">
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three" selected>3</option>
</select>
</td>
<td>
Four
</td>
<td>
Five
</td>
</tr>
</table>
要控制线条的宽度，您必须指定包含 HR 的表格单元格的宽度。对于 HR 元素的样式，他们说你不应该让它的高度小于 3px。
于 2011-07-15T01:00:39.430 回答
0
如何将<hr />元素绝对定位在行的顶部。根据需要的静态或动态程度，它可能是一种非常快速/简单的方法，也可能是更难的方法。
于 2011-01-06T20:36:19.553 回答