gpt4 book ai didi

html - 如何绘制没有内容的水平线html表格

转载 作者:太空宇宙 更新时间:2023-11-03 20:28:26 25 4
gpt4 key购买 nike

如何在不使用 content css 的情况下绘制一条从 td 1 到 td 4 的水平线

我期待如下进度条 enter image description here

<table>
<hr>
<tr style="border-bottom:1px solid black;">
<td>
<div class="circle"><span id="progressindex">1</span></div>
</td>
<td>
<div class="circle">2</div>
</td>
<td>
<div class="circle">3</div>
</td>
<td>
<div class="circle">4</div>
</td>
</tr>
</table>

最佳答案

如果不使用 CSS,您将无法做到这一点。尝试这种方式,但它使用 CSS 并提供您想要的内容。

HTML

<html>
<head>
<title>Step Progress bar</title>
</head>
<body>
<div class="container">
<ul class="progressbar">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>

</body>

</html>

CSS

.container {
width: 100%;
}

.progressbar {
counter-reset: step;
}
.progressbar li {
list-style: none;
display: inline-block;
width: 30.33%;
position: relative;
text-align: center;
cursor: pointer;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
line-height : 30px;
border: 1px solid #ddd;
border-radius: 100%;
display: block;
text-align: center;
margin: 0 auto 10px auto;
background-color: #fff;
}
.progressbar li:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index : -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: green;
}
.progressbar li.active + li:after {
background-color: green;
}

关于html - 如何绘制没有内容的水平线html表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48148617/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com