Question

如何使用内容css

绘制从td 1 td 4触摸的水平线

我期待如下进度条

<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>

Answer 1

不使用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;
}

Answer 2

我认为当您点击运行代码段时，您会看到最后一个表.. 我认为更好

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>

 <style type="text/css">
	.addouterline{
		border-bottom:1px solid red;
		color:red;
	}
	.roundnormal{border-radius: 70%;
	text-align:center;
	margin-bottom:30px;
	line-height:20px;
	width:40px;
	height:30px;
	border:1px solid black;
	}
	.roundthis{border-radius: 70%;
	text-align:center;
	margin-bottom:30px;
	line-height:20px;
	width:40px;
	height:30px;
	border:1px solid red;
  color:red;
	}
</style>
From 1 to 4 :
  <table width="400px" cellpadding="0" cellspacing="0">
  <!-- <hr> 
  <tr style="border-bottom:1px solid black;">-->
<tr align="center">
    <td  align="right"><span style="width:100px;" class="addouterline">&nbsp;</span></td><td class="addouterline" width="200px"></td><td class="addouterline" width="200px"></td><td align="left"><span style="width:100px;" class="addouterline">&nbsp;</span></td>
</tr>
<tr align="center">
    <td style="color:red">|</td><td></td><td></td><td style="color:red">|</td>
</tr>
  <tr align="center">
    <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>
<br>
<hr>
<br>
From 1 to 3 :
  <table width="400px" cellpadding="0" cellspacing="0">
  <!-- <hr> 
  <tr style="border-bottom:1px solid black;">-->
<tr align="center">
    <td  align="right"><span style="width:100px;" class="addouterline">&nbsp;</span></td><td class="addouterline" width="200px"></td><td align="left"><span style="width:100px;" class="addouterline">&nbsp;</span></td><td width="200px"></td>
</tr>
<tr align="center">
    <td>|</td><td></td><td>|</td><td></td>
</tr>
  <tr align="center">
    <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>
<br>
<hr>
<br>
From 2 to 4 :
  <table width="400px" cellpadding="0" cellspacing="0">
  <!-- <hr> 
  <tr style="border-bottom:1px solid black;">-->
<tr align="center">
    <td width="200px"></td><td  align="right"><span style="width:100px;" class="addouterline">&nbsp;</span></td><td class="addouterline" width="200px"></td><td align="left"><span style="width:100px;" class="addouterline">&nbsp;</span></td>
</tr>
<tr align="center">
    <td></td><td style="color:red">|</td><td></td><td style="color:red">|</td>
</tr>
  <tr align="center">
    <td>
      <div class="circle"><!-- <span id="progressindex"> --><span class="roundnormal">&nbsp;1&nbsp;</span><!-- </span> --></div>
    </td>
    <td>
      <div class="circle"><span class="roundthis">&nbsp;2&nbsp;</span></div>
    </td>
    <td>
      <div class="circle"><span class="roundnormal">&nbsp;3&nbsp;</span></div>
    </td>
    <td>
      <div class="circle"><span class="roundthis">&nbsp;4&nbsp;</span></div>
    </td>
  </tr>
</table>


 </body>
</html>

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

2 个答案: