Html 如何在表格行的中间放置一条水平线/边框?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3800676/
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
How do I put a horizontal line/border right in the middle of a table row?
提问by marcamillion
Essentially I would like to apply a bottom-border
, but rather than being in the bottom of the cell, I want it to be in the dead center.
基本上我想应用 a bottom-border
,但不是在单元格的底部,我希望它在死点。
How do I do that with CSS & HTML only (and using no graphics)?
我如何仅使用 CSS 和 HTML(并且不使用图形)来做到这一点?
So imagine the height of the cell/row is 50px, and width = 100px, I would like the line to be width = 100px, and it to be at 25px height in the row/cell.
因此,假设单元格/行的高度为 50 像素,宽度为 100 像素,我希望该行的宽度为 100 像素,并且行/单元格中的高度为 25 像素。
Thanks.
谢谢。
P.S. Imagine something like the cross out functionality for font - but for an empty space (if that makes any sense).
PS 想象一下类似字体的划掉功能 - 但对于空白空间(如果有任何意义)。
回答by jay.lee
perhaps put an <hr>
in the cell and then use CSS to give it an absolute position.
也许<hr>
在单元格中放置一个,然后使用 CSS 给它一个绝对位置。
回答by jay.lee
<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>
回答by y34h
try this:
尝试这个:
<table>
<tr>
<td style="width:100px; height:50px;
line-height:50px; letter-spacing:96px;
text-decoration: line-through;">
</td>
</tr>
</table>
or in case u change ur mind about the graphics:
或者如果你改变了对图形的看法:
td.emptyCell {
background-image: dot.gif; /* 1x1 px, whatever color u want */
background-repeat: repeat-x;
background-position: 0% 50%;
}
回答by Pukhraj soni
The solution worked for me is defining css properties at column level and defining colspan as the number of columns in the table
对我有用的解决方案是在列级别定义 css 属性并将 colspan 定义为表中的列数
HTML -
HTML -
<tr class="border_bottom">
<td colspan="6"></td>
</tr>
CSS -
CSS -
tr.border_bottom td {
border-bottom: 1px solid #cccccc;
color: #707070;
}
table {
border-collapse: collapse;
}