Order status table html/css help

HTML & CSS
1

Hi,

There’s a table which in collapsed form goes like this:

834×90 10.2 KB

and when expanded, becomes this:

825×175 24.6 KB

Now, I have to make an HTML/CSS out of it using tables. For the collapsed form, I used a simple table stuff like this:

<table>
  <tr>
    <th>Account #</th>
    <th>Order #</th>
    <th>Current Status (Ongoing)</th>
  </tr>
  <tr>
    <td>4579637</td>
    <td>5822412</td>
    <td></td>
  </tr>
</table>

But, how will I achieve the expanded version in table form? Do I use only one row with rowspans?
Could anyone help me with an example?

I also need help with the CSS of the weird status graphics, but I guess I will create a thread in the CSS forum for that.

Any help is appreciated!

Thanks!

2

It’s not really clear what behavior you want. For example—

  • how do you want to hidden info to be revealed? (clicking the account number?)
  • what happens to the info in the collapsed view? Is it covered over by the expanded view?
  • are there more rows to be considered? If so, what happens to them in this expanded state?

You need to make sure you are clear on all this before asking for help.

1 Like
3

Hi,

Sorry my post wasn’t very clear.

  1. Clicking the a/c number or the green arrow reveals the hidden info.
  2. in the collapsed view the extra info gets hidden.
  3. There are more rows. In the expanded state, the other rows shift below.

This is what I’ve got till now based on the succinct HTML from this thread:

 <table class="multiAccount">
  <tr>
    <th>Account #</th>
    <th>Order #</th>
    <th>Current Status (Ongoing)</th>
   
  </tr>
  <tr>
    <td>4579637</td>
    <td>5822412</td>
    <td><ol class="steps">
		<li>
				<div class="num"><b>1</b></div>
		</li>
		<li>
				<div class="num"><b>2</b></div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num"><b>3</b></div>
						<p><span>Order Provisioning In Progress</span></p>
				</div>
		</li>
		<li class="closed">
				<div class="num"><b>4</b></div>
		</li>
		<li class="closed">
				<div class="num last"><b>5</b></div>
		</li>
</ol></td>
   
  </tr>
  <tr>
  <td>4579637</td>
    <td>5822412</td>
	<td>
	<ol class="steps">
		<li class="open">
				<div class="wrap">
						<div class="num"><b>1</b></div>
						<p><span>Order Provisioning In Progress</span></p>
				</div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num"><b>2</b></div>
						<p><span>Order Provisioning In Progress</span></p>
				</div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num"><b>3</b></div>
						<p><span>Order Provisioning In Progress</span></p>
				</div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num"><b>4</b></div>
						<p><span>Order Provisioning In Progress</span></p>
				</div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num"><b>5</b></div>
						<p><span>Order Provisioning In Progress</span></p>
				</div>
		</li>
</ol>
	</td>
  </tr>
  
  <tr>
  <td>4579637</td>
    <td>5822412</td>
	<td>
	
	<ol class="steps">
		<li>
				<div class="num"><b>1</b></div>
		</li>
		<li>
				<div class="num"><b>2</b></div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num"><b>3</b></div>
						<p><span>Order Provisioning In Progress</span></p>
				</div>
		</li>
		<li class="closed">
				<div class="num"><b>4</b></div>
		</li>
		<li class="closed">
				<div class="num last"><b>5</b></div>
		</li>
</ol>
	</td>
  </tr>
  
  
</table>

This is the full table I’m trying to recreate:

844×614 79.2 KB

4

I suppose the question is whether you mind duplicating the html for the numbers (1 - 5) in the revealed row. If that’s not an issue then you just have a hidden row with a single-cell (using colspan) and layout your content as required in that cell.

You would then hide the original row at the same time as revealing the hidden row (with js/jquery etc).

If you didn’t want to duplicate data then it gets a bit tricky as the first row isn’t in a format that can accept the data from the revealed row unless you made the original row a single cell to start with and just space it out with css. Then you would probably only need to duplicate the order number as that gets moved into a new position.

5

At first I thought doing it without duplicating data, but that was way too tricky for me. So I did duplicate the data and this is what I’ve got (of course the status steps are by @PaulOB from this thread):

(how do I embed this pen here like others do!!! :frowning: )

6

Looks good to me :slight_smile:

Usually you just post the link as plain text:

e.g.

Don’t add it as a link http://codepen.io/paulobrien/full/sEnxy/

2 Likes