html css标签动态标注,css-贯穿整个HTML标签

css-贯穿整个HTML标签

经过一番研究，我找不到这个问题的答案。 确实有这个，但并没有真正回答我的问题。 我想“删除线” CSS中完整的HTML表行，而不仅仅是其中的文本。 有可能吗？ 从我链接的示例中，似乎tr样式甚至在Firefox中都不起作用。 (无论如何，文本装饰仅适用于文本afaik)

8个解决方案

91 votes

哦，是的，是的！

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：

Stuff	Stuff	Stuff
Stuff	Stuff	Stuff
Stuff	Stuff	Stuff

[http://codepen.io/nericksx/pen/CKjbe]

crinkledMap answered 2020-01-02T15:14:28Z

37 votes

我的回答(如下)说这是不可能的。 正如@NicoleMorganErickson所指出的，我错了。 请查看她的答案(并投票赞成！)以了解操作方法。 简而言之，您可以使用color伪类来创建一个元素，该元素在内容上方的单元格中间绘制边框：

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-color、color0和/或text-decoration:line-through使整个行明显不同。 (我个人强烈建议将文本淡入淡出的颜色，使其比背景文本更接近背景，并使其斜体。)

Phrogz answered 2020-01-02T15:15:03Z

11 votes

最简单的方法是在tr及其后代单元上使用background-image(或在这些单元上简单地使用透明background-color)。

的HTML：

Col OneCol TwoCol Three

First row, One-OneFirst row, One-TwoFirst row, One-Three

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;

}

JS小提琴演示

David Thomas answered 2020-01-02T15:15:36Z

10 votes

tr {

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGCQBAAAIwAbDJgTxgAAAABJRU5ErkJggg==');

background-repeat: repeat-x;

background-position: 50% 50%;

}

我使用了[http://www.patternify.com/]来生成1x1图片网址。

Semiaddict answered 2020-01-02T15:15:56Z

8 votes

我喜欢妮可·摩根·埃里克森(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%;

}

用法：

Some Column	Command Column
	Button that Toggles Striking Goes Here (active)
	Button that Toggles Striking Goes Here

最后，由于我将其与Bootstrap结合使用，并且将删除操作视为一件危险的事，因此我对颜色进行了一些格式化，以适应我的使用。

Greg answered 2020-01-02T15:16:35Z

3 votes

@NicoleMorganErickson，我喜欢您的回答，但我无法使删除线仅影响所应用的行。 另外，我需要将其应用于多行，因此将您的解决方案修改为一个类。

CSS：

tr.strikeout td:before {

content: " ";

position: absolute;

display: inline-block;

padding: 5px 10px;

left: 0;

border-bottom: 1px solid #111;

width: 100%;

}

[http://codepen.io/anon/pen/AaFpu]

Revoman answered 2020-01-02T15:17:04Z

1 votes

是的你可以。 在该行的第一个单元格中，创建一个包含HR的div。 将div浮动到左侧，并将其宽度指定为其包含元素的百分比，在这种情况下为表格单元格。 它会跨该行中的表格单元格任意扩展，甚至超出表格的宽度。

这对我有用：

.strikeThrough {

height:3px;

color:#ff0000;

background-color:#ff0000;

}

.strikeThroughDiv {

float:left;

width:920%;

position:relative;

top:18px;

border:none;

}

One

1 2 3

Four

Five

要控制行的宽度，必须指定包含HR的表格单元格的宽度。 他们说，为HR元素设定样式时，高度不应小于3像素。

Eamonn Gormley answered 2020-01-02T15:17:33Z

0 votes

如何将

---

元素绝对定位在行的顶部。 根据需要的静态或动态程度，这可能是一种极其快速/简便的方法，或者难度更大。

JakeParis answered 2020-01-02T15:17:54Z