如何在表格行的中间放置一条水平线/边框？答案

【问题标题】：How do I put a horizontal line/border right in the middle of a table row?如何在表格行的中间放置一条水平线/边框？
【发布时间】：2020-10-23 22:33:12
【问题描述】：

基本上我想申请一个bottom-border，但不是在单元格的底部，我希望它在死点。

如何仅使用 CSS 和 HTML（不使用图形）来做到这一点？

假设单元格/行的高度为 50px，宽度 = 100px，我希望线条宽度 = 100px，并且行/单元格的高度为 25px。

谢谢。

附：想象一下类似字体的划掉功能 - 但对于一个空白空间（如果这有意义的话）。

【问题讨论】：

标签： html css

【解决方案1】：

也许在单元格中放置一个<hr>，然后使用 CSS 给它一个绝对位置。

【讨论】：

【解决方案2】：

    <table>
<tr style="border-bottom:1px solid black">
<td>abc</td><td>abc</td>
<tr style="border-bottom:1px solid black">
<td>def</td><td>def</td>
</table>

【讨论】：

谢谢。我在我的情况下添加colspan="100%"：<tr style="border-bottom:1px solid black"><td colspan="100%"></td></tr>

【解决方案3】：

试试这个：

<table>
    <tr>
        <td style="width:100px; height:50px;
                   line-height:50px; letter-spacing:96px;
                   text-decoration: line-through;">
        &nbsp;
        </td>
    </tr>
</table>

或者如果你改变了对图形的想法：

td.emptyCell {
    background-image: dot.gif; /* 1x1 px, whatever color u want */
    background-repeat: repeat-x;
    background-position: 0% 50%;
}

【讨论】：

顶部是一个有趣的 hack，但对我目前的情况不太适用。为了让它工作，我必须有无穷无尽的&nbsp - 这很快就会变得不整洁:) 至于第二种解决方案......我对那个解决方案持怀疑态度。仍然试图不使用图形。我们会看看我能坚持多久。

【解决方案4】：

对我有用的解决方案是在列级别定义 css 属性并将 colspan 定义为表中的列数

HTML -

<tr class="border_bottom">
    <td colspan="6"></td>
</tr>

CSS -

tr.border_bottom td {
    border-bottom: 1px solid #cccccc;
    color: #707070;
}

table {
    border-collapse: collapse;
}

【讨论】：

【解决方案5】：

不使用任何图像的表格的最佳方式：

<style>
.dotted{
width:10px;height:50px;
line-height:50px;letter-spacing:96px;
text-decoration: line-through;text-decoration-style:dashed;
}
</style>
<table>
    <tr>
    <td><span>Additional Charges</span></td>
        <td class="dotted">
        &nbsp;
        </td>
        <td><span>INR 3000.00</span></td>
    </tr>
</table>

【讨论】：