I'm currently working with a table that displays the current status of a request. An example of how the table looks in HTML is shown below:
https://i.sstatic.net/daDHy.png
The table itself is quite simple, but I am having trouble figuring out how to effectively display the timeline within the status column. One potential solution could be using a grid layout that visually represents the timeline as shown below or in a similar manner.
Timeline examples: New, Approved, In Progress, etc.
To create a continuous timeline, I recommend using the :before and :after pseudo-elements.
You can define two classes for the timeline display: .has-left and .has-right.
table {
border-collapse: collapse;
}
table td {
border: 1px solid #ddd;
}
.timeline {
text-align: center;
vertical-align: middle;
height: 30px;
width: 50px;
position: relative;
}
.timeline span {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: gray;
display: none;
}
.timeline.has-left:before {
content: '';
display: inline-block;
position: absolute;
left: -1px;
width: 50%;
height: 3px;
top: 12px;
background-color: gray;
}
.timeline.has-right:after {
content: '';
display: inline-block;
position: absolute;
right: -1px;
width: 50%;
height: 3px;
top: 12px;
background-color: gray;
}
.timeline.has-left span,
.timeline.has-right span {
display: inline-block;
}<table>
<tr>
<td class="timeline has-right"><span></span>
</td>
<td class="timeline has-left has-right"><span></span>
</td>
<td class="timeline has-left"><span></span>
</td>
<td class="timeline"><span></span>
</td>
</tr>
<tr>
<td class="timeline has-right"><span></span>
</td>
<td class="timeline has-left"><span></span>
</td>
<td class="timeline has-right"><span></span>
</td>
<td class="timeline has-left"><span></span>
</td>
</tr>
<tr>
<td class="timeline"><span></span>
</td>
<td class="timeline has-right"><span></span>
</td>
<td class="timeline has-left has-right"><span></span>
</td>
<td class="timeline has-left"><span></span>
</td>
</tr>
</table>If I am required to use tables, my preferred approach would involve utilizing CSS :after selectors.
Sample HTML Code:
<table width="50%" cellpadding="0" cellspacing="0">
<tr>
<th width="25%">Item</th>
<th width="25%">Status 1</th>
<th width="25%">Status 2</th>
<th width="25%">Status 3</th>
</tr>
<tr class="status3">
<td>Stat3</td>
<td><i class="circle"></i></td>
<td><i class="circle"></i></td>
<td><i class="circle"></i></td>
</tr>
<tr class="status1">
<td>Stat1</td>
<td><i class="circle"></i></td>
<td></td>
<td></td>
</tr>
<tr class="status2">
<td>Stat2</td>
<td><i class="circle"></i></td>
<td><i class="circle"></i></td>
<td></td>
</tr>
</table>
CSS Styles:
i.circle {
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
background: #ccc;
margin: auto;
}
tr.status3 td:nth-child(2):after,
tr.status3 td:nth-child(3):after,
tr.status3 td:nth-child(4):after,
tr.status2 td:nth-child(2):after,
tr.status2 td:nth-child(3):after {
display: block;
width: 50%;
background: #ccc;
height: 5px;
content: ' ';
float: right;
margin-top: -12px;
}
tr.status3 td:nth-child(3):after{
width: 100%;
}
tr.status3 td:nth-child(4):after{
width: 50%;
float: left;
}
tr.status2 td:nth-child(3):after{
width: 50%;
float: left;
}
Check out the demonstration on this fiddle link:
Can someone explain why the panel-header displays all "-" instead of "+"? When I click on the panel, it changes all "-" to "+". This happens consistently, not just the first time the page loads. My CSS code: .panel-heading a:after { font-family: &ap ...
After successfully reading files via PHP from a directory and dynamically creating a drop-down menu to view the file content, I have a query. Is there a way to display the text files' content on the same page without calling another PHP page? I know t ...
Hello there, I am currently working on a form to submit data to the database using ajax and CodeIgniter. The form seems to work fine for inserting data, but it lacks validation to check whether the fields are empty or not. I am attempting to add an if-else ...
When I have a line of code containing several hyperlinks, my desired output is a single line. However, despite using CSS to set white-space to nowrap, the result is not as expected. The line of code in question is: <a href="profile.php?v=<?php echo ...
My current setup involves a simple HTML form with a submit button that triggers my PHP script to process the input. However, I've encountered an issue where my PHP code fails to recognize the quotation mark when using str_replace function. Below is a ...
Usually, I cache DOM objects used in a script. However, recently I found myself having to reference the document object within a jQuery wrapper. I started questioning whether caching $(document) is necessary since there's only one document object per ...
I received a field from SERVICE that contains a hyphen. For example, first-name (as a JSON object). However, when I attempt to retrieve the value of this field in my JSP file, I encounter a script error. Can you please advise me on how to properly access ...
My code is experiencing an issue where the URL and ID are not being passed correctly from one function to another. When I click on a link that contains the add() function, it fails to capture the URL and ID. <a href="#" style="color:#FFF;" onclick="add ...
I am experiencing issues with the design of a nested div element when viewed in the default Android browser. Unfortunately, I don't have access to tools that would allow me to identify the cause of this problem. However, the design functions correctly ...
I'm currently working on a project where I need to animate a green bar moving upward over a blue bar when a button is clicked. However, no matter what I try, the button doesn't seem to be working. I've experimented with using both the button ...
I'm currently working on a Python program that sends a 'hello' packet to the server and I'm wondering if I can get the server to respond based on that. Here's the code snippet I'm using to send the packet: import requests hL = ...
Typically, the code margin:auto is used for centering, but I have a different code below. HTML : <article> <header></header> </article> CSS: article{ max-width: 500px; margin: auto; /* centered - nice */ } header{ width: ...
Every time I attempt to utilize document.write, it ends up replacing the current HTML page content. For instance, consider this HTML code: <body> <div> <h1>Hello</h1> </div> and this jQuery code: var notif = document. ...
Is there a way to avoid adding new lines of JS code every time I add a new image to the HTML? $(document).ready(function() { $('.btn').click(function() { var bid = $(this).attr('id'); if(bid=="img1" || bid == "img2" || bid == "img3"){ ...
Experience a dynamic modal element that springs to life with just the click of a button or an image. The magic lies in the combination of HTML, CSS, and jQuery code: <div id="modal-1" class="modal"> <div class="button modal-button" data-butto ...
I'm familiar with the jquery cookie plugin, but I'm having trouble setting a cookie when clicking the close button. Here's how I've approached it: <script type='text/javascript' src='jquery-latest.js'></sc ...
I've tried applying active properties in my CSS and JavaScript, but it doesn't seem to be working as expected. I can click on each list item, but the active state is not being displayed correctly. Can someone please assist me with this issue? I w ...
How can I model an object in Vue that contains both known and unknown values? The quantity is unknown, but the type is known. I need to present user inputs for each type, where the user enters the quantity. How should I approach this? data() { retur ...
The alignment of content is not centered using bootstrap flex <div class="d-flex flex-row bd-highlight mb-3"> <div class="p-2 bd-highlight text-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></div> <div cla ...
Can you help me troubleshoot this HTML code snippet I have? <html> <head> <script type="text/javascript" language="JavaScript1.3" src="js/euDock.2.0.js"></script> <script type="text/javascript" language="JavaScript1.3" ...