How can I put my TH next to TD when media screen becomes 787px

Question

1.00/5 (2 votes)

See more:

I wanted some of my Td (the first two numbers from the bottom) to have "PRICE" and "TOTAL PRICE" name labels next to them when the media screen becomes 787px for example, Price: 20USD and TOTAL PRICE: 40USD. But I couldn't figure out how to do it. If you have any suggestions or ideas, please tell me what to do.

THANK YOU

Here is the code: https://codepen.io/jujuju12/pen/NWYjxoM[^]

What I have tried:

I tried to change the position of Table or TH but it didn't work.

Posted 20-Jul-22 2:41am

Member 15332881

Updated 20-Jul-22 3:54am

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Accepted Answer · 2022-07-20T03:54:00

Solution 2

You could add a <span> in the <td> and have that become visible/hidden depending on the maximum width of the screen. For example:

CSS

.only-when-small {
  display: none;
}

@media (max-width: 787px) {
  
  .only-when-small {
    display: inline-block;
  }
}

HTML

<td>
  <span class="only-when-small">Price: </span> 20 USD
</td>

Posted 20-Jul-22 3:54am

Chris Copeland

Comments

Member 15332881 23-Jul-22 20:57pm

Thank you!

Richard MacCutchan · Accepted Answer · 2022-07-20T03:29:00

Solution 1

See this section at W3Schools on HTML table layout: HTML Table Headers[^].

Posted 20-Jul-22 3:29am

Richard MacCutchan

How can I put my TH next to TD when media screen becomes 787px

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

How can I put my TH next to TD when media screen becomes 787px

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us