Question

这个想法是，在一张桌子里，在一个td里面放一条线，就像这样：

1 http://oi61.tinypic.com/nzem2h.jpg

您可以在其中写入并且该行保留在那里，如“行背景”，但在td内

有什么想法吗？

Answer 1

有很多方法

1）添加HTML <strike>或<del>。

2）使用css属性text-decoration: line-through;

3）使用CSS：

td{
    border: 1px solid black;
    position: relative;
}

td:after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: black;
    position: absolute;
    top: 50%;
}

Working Fiddle

编辑：由于firefox中有一个与position：relative和td元素相关的错误，请将文本包装在每个td的div中并使用相同的css。

<强> Working Fiddle

编辑2 ：在下面的评论中，@ NicoO显示可以通过将line-height: 0提供给tr元素来解决firefox错误。

<强> Working Fiddle

Answer 2

以下是工作单 - Result Fiddle

<强> HTML

<td><i class="line"></i>This Is demo Text</td>

<强> CSS

.line{
    width:100%;
    height:0;
    border-bottom:1px solid #111;
    float:left;
    margin:0;
    position:absolute;
    z-index:0;
    top:50%;
    left:0
}

Answer 3

您可以尝试创建一个图像（1px宽度和高度的td）并在css中使用background-image属性，如下所示：

td{
    background-image: url('relative/path/to/your/image');
}

Answer 4

我刚刚用跨度测试过它，并且它有效，但其他解决方案可能更优雅。

http://codepen.io/anon/pen/GAlFr

CSS水平线在td中间

4 个答案: