Linethrough/strikethrough 整个 HTML 表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4619542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Linethrough/strikethrough a whole HTML table row
提问by Mathieu M-Gosselin
After some research, I couldn't find an answer to this question. There was thisbut it didn't really answer my question. I would like to "strikethrough" a complete HTML table row in CSS, not just the text in it. Is it at all possible? From the example that I linked, it seems tr styling doesn't even work in Firefox. (And anyway, text-decoration only applies on text afaik)
经过一番研究，我找不到这个问题的答案。有这个，但它并没有真正回答我的问题。我想在 CSS 中“删除”一个完整的 HTML 表格行，而不仅仅是其中的文本。有可能吗？从我链接的示例来看，似乎 tr 样式在 Firefox 中甚至不起作用。（无论如何，文本装饰仅适用于文本 afaik）
回答by crinkledMap
Oh yes, yes it is!
哦，是的，是的！
CSS:
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:
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>
回答by Phrogz
My answer (below) said that it is not possible. I was wrong, as pointed out by @NicoleMorganErickson. Please see her answer (and upvote it!) for how to do it. In short, you use :beforepseudo-class to create an element that draws a border across the middle of the cell, above the content:
我的回答（如下）说这是不可能的。正如@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 */
}
(original answer)
（原答案）
No, it is not possible using only CSS and your semantic table markup. As @JMCCreative suggests, it is possible visuallyusing any number of ways to position a line over your row.
不，仅使用 CSS 和语义表标记是不可能的。正如@JMCCreative 所建议的那样，可以在视觉上使用多种方式在您的行上放置一条线。
I would instead suggest using a combination of color, background-color, font-style:italicand/or text-decoration:line-throughto make the entire row obviously different. (I'd personally strongly 'fade out' the text to a color much closer to the background than normal text and make it italic.)
我反而建议使用的组合color，background-color，font-style:italic和/或text-decoration:line-through使整个排明显不同。（我个人强烈地将文本“淡出”为比普通文本更接近背景的颜色并使其成为斜体。）
回答by Semiaddict
tr {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGCQBAAAIwAbDJgTxgAAAABJRU5ErkJggg==');
background-repeat: repeat-x;
background-position: 50% 50%;
}
I used http://www.patternify.com/to generate the 1x1 image url.
我使用http://www.patternify.com/生成 1x1 图像 url。
回答by David says reinstate Monica
The easiest way would be to use a background-imageon the trand its descendant cells (or simply use a transparent background-coloron those cells).
最简单的方法是background-image在tr及其后代单元格上使用 a （或简单地background-color在这些单元格上使用透明）。
html:
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:
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;
}
回答by Greg
Edit 02/03/2020:
2020 年 2 月 3 日编辑：
In a recent bootstrap 4.3 ServiceNow Angular.jsproject, I found myself having to make some changes, and instead used the following css, similar to the experience of Revoman:
在最近的一个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%;
}
Orginal Post:
原帖：
I like Nicole Morgan Erickson'sanswer, but it might cause side effectsif your implement his solution verbatim. I've add some small tweaks to keep this kosher, below... so that we're not globally modifying every table or every td with this css.
我喜欢Nicole Morgan Erickson 的回答，但如果您逐字执行他的解决方案，可能会引起副作用。我在下面添加了一些小调整以保持这个 kosher，这样我们就不会全局修改每个表或每个 td 使用这个 css。
I also wanted a button on the row to strike out the row, but I didn't want to strike out the column with the button, for visibility sake. I just wanted to strike out the rest of the row. For this, I made it so that every column that wants to be capable of showing the strike out must declare such by also being marked with a class. In this iteration, you'd need to mark the table as strike-able, and also mark each td as strike-able; but you gain safety by not side effecting any non-strike-able tables, and you gain control of which columns to strike out.
我还希望行上有一个按钮来删除该行，但为了可见性，我不想用按钮删除列。我只是想剔除该行的其余部分。为此，我这样做是为了让每一个想要能够显示删除的列都必须通过也标记一个类来声明。 在此迭代中，您需要将表标记为可删除，并将每个 td 标记为可删除；但是您不会对任何不可删除的表产生副作用，从而获得安全性，并且您可以控制要删除的列。
CSS:
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%;
}
Usage:
用法：
<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>
Lastly, since I'm using this with Bootstrap, and treating the deletions as a dangerous thing to do, I've formatted the colors a little to match my use.
最后，由于我将它与 Bootstrap 一起使用，并将删除视为危险的事情，因此我对颜色进行了一些格式化以匹配我的使用。
回答by Revoman
@NicoleMorganErickson, I like your answer, but I could not get the strikeout to affect only the applied row. Also, I needed it to be applied multiple rows so I modified your solution down into a single class.
@NicoleMorganErickson，我喜欢你的回答，但我无法让三振出局只影响应用的行。此外，我需要将它应用于多行，因此我将您的解决方案修改为一个类。
CSS:
CSS：
tr.strikeout td:before {
content: " ";
position: absolute;
display: inline-block;
padding: 5px 10px;
left: 0;
border-bottom: 1px solid #111;
width: 100%;
}
回答by gaw89
EDIT: As pointed out by @Mathieu M-Gosselin in the comments, this actually puts the line behind the text.That said, if your line is the same color as your text or you are using a small-ish font, this still works pretty well.
编辑：正如@Mathieu M-Gosselin 在评论中指出的那样，这实际上是将这条线放在文本后面。也就是说，如果您的线条与文本颜色相同，或者您使用的是小字体，这仍然可以很好地工作。
For what it's worth, here's a pretty effective way to do it in pure CSS without using pseudo elements. You can change the thickness of the strikethrough line by adjusting the background-size.
值得一提的是，这里有一种非常有效的方法可以在纯 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>回答by Eamonn Gormley
Yes you can. In the first cell of the row you create a div containing a HR. Float the div to the left and specify its width as a % of its containing element, in this case the table cell. It'll stretch as wide as you want across the table cells in that row, even beyond the width of the table if you want.
是的你可以。在该行的第一个单元格中创建一个包含 HR 的 div。将 div 向左浮动，并将其宽度指定为其包含元素的 %，在本例中为表格单元格。它将在该行中的表格单元格中根据您的需要伸展，如果您愿意，甚至可以超出表格的宽度。
This works for me:
这对我有用：
<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>
To control the width of your line you have to specify the width of the table cell containing the HR. For styling HR elements they say you shouldn't make it less than 3px in height.
要控制线条的宽度，您必须指定包含 HR 的表格单元格的宽度。对于样式 HR 元素，他们说你不应该让它的高度小于 3px。
回答by JakeParis
How about absolutely positioning an <hr />element overtop of the row. Depending on how static or dynamic this needs to be, it could be an extremely fast/easy way to go or much harder.
如何将<hr />元素绝对定位在行的顶部。根据需要的静态或动态程度，它可能是一种非常快速/简单的方法，或者更难。
