如何清除表格行中元素的换行？

发布于 2024-11-03 04:15:18 字数 444 浏览 3 评论 0原文

我在“清除”在表行上使用的直通线时遇到问题。我不希望链接出现直通效果。我正在使用 Javascript 动态更改 tr 类，因此我希望使其尽可能简单。

我当前的代码：

HTML：

<table>
<tr class="table-item">
<td>Text</td>
<td><a href="#">Delete item</a></td>
</tr>
</table>

CSS：

.table-item td {
text-decoration: line-through;
}
.table-item a {
text-decoration: none;
}

有什么建议吗？

原文

I'm having trouble "clearing" a line-through that I'm using on a table row. I don't want the line-through effect on the link. I'm changing the tr class dynamically with Javascript so I would like to keep it as simple as possible.

My current code:

HTML:

<table>
<tr class="table-item">
<td>Text</td>
<td><a href="#">Delete item</a></td>
</tr>
</table>

CSS:

.table-item td {
text-decoration: line-through;
}
.table-item a {
text-decoration: none;
}

Any suggestions?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

滥情哥ㄟ 2024-11-10 04:15:18

我在 jsFiddle 中玩它。似乎唯一的方法是将您想要 line-through 的其他内容包装在另一个元素中，例如 span。

更新：根据要求来自 jsFiddle 的代码：

<table>
  <tr class="table-item">
    <td><span>Text</span></td>
    <td><a href="#">Delete item</a></td>
  </tr>
</table>

CSS：

.table-item td span {
  text-decoration: line-through;
}

I was playing with it in jsFiddle. Seems like the only way to do it is to wrap the other content that you want the line-through on in another element, like a span.

Update: code from jsFiddle, as requested:

<table>
  <tr class="table-item">
    <td><span>Text</span></td>
    <td><a href="#">Delete item</a></td>
  </tr>
</table>

CSS:

.table-item td span {
  text-decoration: line-through;
}

回复收藏 0 原文

后来的我们 2024-11-10 04:15:18

我不确定，为什么没有人指出。这实际上是可能的。

的链接

这是小提琴JSFiddle

在您不想显示行的元素上添加 display: inline-block 即可解决问题。

尝试：

.table-item td {
  text-decoration: line-through;
}
.table-item a {
  text-decoration: none;
  display: inline-block;
}

I am not sure, why anyone has not pointed out. This is actually possible.

Here is the link to fiddle

JSFiddle

Adding display: inline-block on element which you dont want to show line-through will do the trick.

Try:

.table-item td {
  text-decoration: line-through;
}
.table-item a {
  text-decoration: none;
  display: inline-block;
}

回复收藏 0 原文

烙印 2024-11-10 04:15:18

根据您的浏览器要求（在旧版 IE 中不起作用），您可以使用：

.table-item td:first-child {
  text-decoration: line-through;
}

Depending on your browser requirements (won't work in old IE) you can use:

.table-item td:first-child {
  text-decoration: line-through;
}

回复收藏 0 原文

甜宝宝 2024-11-10 04:15:18

使用跨度是不可能的吗？

a {
    text-decoration: none;  
}
td span{
text-decoration: line-through;
}

<table>
<tr class="table-item">
<td><span>Text</span></td>
<td><a href="#">Delete item</a></td>
</tr>
</table>

或者您是否严格使用代码注入来设置删除线样式？

Is using span, out of the question?

a {
    text-decoration: none;  
}
td span{
text-decoration: line-through;
}

<table>
<tr class="table-item">
<td><span>Text</span></td>
<td><a href="#">Delete item</a></td>
</tr>
</table>

Or are you strictly using code injection to style the strikethrough?

回复收藏 0 原文

~没有更多了~