如何添加虚线或添加填充到 td 边框
How to add a dotted line or add padding to td border
下图已经接近我正在寻找的解决方案(参见my codepen)。唯一缺少的是 <tbody>
或 <thead>
的轮廓边框与 <td>
的边框之间的填充/间隙
问题
- 如果必须创建类似于上图的内容,您会采用什么方法?
- 我怎样才能使虚线在 td (/ tr) 的边界与 tr 或 tbody 或 table 的轮廓之间有一些间隙?
代码
你可以看看code on codepen。我的CSS方法是这样的
table { width: 100%; }
/** outline: 0.5pt solid; outline-color: black; border-spacing: .2em 0em; **/
thead, tbody { outline: 0.5pt solid; outline-color: black; }
th.sgn { border-bottom: 1pt dotted blue; padding-top: 1ex;}
td.sgn { border-bottom: 1pt dotted blue; padding-top: 1ex;}
<table>
<colgroup>
<col width="20%">
<col width="35%">
<col width="15%">
<col width="30%">
</colgroup>
<thead>
<tr>
<th>Werkzeugnr:</th>
<th class="sgn"> </th>
<th>Index</td><th class="sgn"></th>
</tr>
<tr class="sml">
<th colspan="4"> </th>
</tr>
</thead>
<tbody>
<tr><th colspan="4"><h3>Bitte ausfüllen und abheften!</h3></th></tr>
</tbody>
<tbody>
<tr>
<td>Einbaudatum:</td><td class="sgn"> </td>
<td>Name</td><td class="sgn"> </td>
</tr>
<tr><td>Anlaufprobleme:</td><td><input type="checkbox"></td><td colspan="2">Bitte Grund angeben</td>
</tr>
</tbody>
</table>
What approach would you take if you had to create something that looks like the image above?
CSS 伪元素非常适合这个用例。
.sgn::after {
content: '';
position: absolute;
border-bottom: 2px dotted blue;
width: 20%;
}
您可以根据自己的喜好进行调整,我无法确定要使其工作的宽度,但我相信您可以。
我会用 ::before
和 ::after
伪 classes 实现那个间距。
- 首先,给你想要的元素 space 一个独特的 class(例如
.spaced
)。
<td class="spaced sgn" colspan="3"> </td>
- 然后,给它一个
relative
位置,这样 ::before
和 ::after
就相对于它定位:
.spaced {
position: relative;
}
- 把
::before
和::after
加上你想要的width
作为space,分别放在左边和右边:
.spaced::before,
.spaced::after {
content: "";
position: absolute;
width: 1rem;
height: 1rem;
background: white;
bottom: -0.5rem;
}
.spaced::before {
left: 0;
}
.spaced::after {
right: 0;
}
下图已经接近我正在寻找的解决方案(参见my codepen)。唯一缺少的是 <tbody>
或 <thead>
的轮廓边框与 <td>
问题
- 如果必须创建类似于上图的内容,您会采用什么方法?
- 我怎样才能使虚线在 td (/ tr) 的边界与 tr 或 tbody 或 table 的轮廓之间有一些间隙?
代码
你可以看看code on codepen。我的CSS方法是这样的
table { width: 100%; }
/** outline: 0.5pt solid; outline-color: black; border-spacing: .2em 0em; **/
thead, tbody { outline: 0.5pt solid; outline-color: black; }
th.sgn { border-bottom: 1pt dotted blue; padding-top: 1ex;}
td.sgn { border-bottom: 1pt dotted blue; padding-top: 1ex;}
<table>
<colgroup>
<col width="20%">
<col width="35%">
<col width="15%">
<col width="30%">
</colgroup>
<thead>
<tr>
<th>Werkzeugnr:</th>
<th class="sgn"> </th>
<th>Index</td><th class="sgn"></th>
</tr>
<tr class="sml">
<th colspan="4"> </th>
</tr>
</thead>
<tbody>
<tr><th colspan="4"><h3>Bitte ausfüllen und abheften!</h3></th></tr>
</tbody>
<tbody>
<tr>
<td>Einbaudatum:</td><td class="sgn"> </td>
<td>Name</td><td class="sgn"> </td>
</tr>
<tr><td>Anlaufprobleme:</td><td><input type="checkbox"></td><td colspan="2">Bitte Grund angeben</td>
</tr>
</tbody>
</table>
What approach would you take if you had to create something that looks like the image above?
CSS 伪元素非常适合这个用例。
.sgn::after {
content: '';
position: absolute;
border-bottom: 2px dotted blue;
width: 20%;
}
您可以根据自己的喜好进行调整,我无法确定要使其工作的宽度,但我相信您可以。
我会用 ::before
和 ::after
伪 classes 实现那个间距。
- 首先,给你想要的元素 space 一个独特的 class(例如
.spaced
)。
<td class="spaced sgn" colspan="3"> </td>
- 然后,给它一个
relative
位置,这样::before
和::after
就相对于它定位:
.spaced {
position: relative;
}
- 把
::before
和::after
加上你想要的width
作为space,分别放在左边和右边:
.spaced::before,
.spaced::after {
content: "";
position: absolute;
width: 1rem;
height: 1rem;
background: white;
bottom: -0.5rem;
}
.spaced::before {
left: 0;
}
.spaced::after {
right: 0;
}