1

how to draw a horizontal line touching from td 1 td 4 with out using content css

I am expecting as below progress bar 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>

4
  • 2
    why do you not want to use CSS?
    – Jhecht
    Jan 8, 2018 at 10:44
  • 1
    <tr style="border-bottom:1px solid black;"> => you already use CSS... as much as using it again ..
    – F0XS
    Jan 8, 2018 at 10:44
  • 2
    Use an ordered list, not a table.
    – connexo
    Jan 8, 2018 at 10:48
  • 1
    maybe this is e-mail distribution Jan 8, 2018 at 10:50

2 Answers 2

3

Without using CSS you cannot do it. Try this way but it uses CSS and also gives what you want.

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;
}
1
  • I expecting not this way solution. Using table only i want to draw progress bar.
    – Test
    Jan 8, 2018 at 11:27
2

i think when you click Run code snippet you'll see the last table .. i think is better

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.