How do I position a td element relative to its row?

moonman239 · Sep 30, 2020

My shopping cart table doesn't look good on mobile, so I'm playing around with positioning. Just to get things going, I've created the following code:

Code:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<style>
.product-quantity
{
   position:absolute;
   top:0px;
   left:0px;
   bottom:200px;
}
</style>
<table>
<tr>
<th>Product Name</th>
<th>Quantity</th>
</tr>
<tr>
<td>The Flint Lockwood Diatonic Super Mutating Dynamic Food Replicator</td>
<td class="product-quantity">
1
</td>
</tr>
<tr>
<td>"Here Comes the Sun"</td>
<td class="product-quantity">1</td>
</table>
</body>
</html>

Now, I want the quantities to appear below the product name, but I'm guessing that is a discussion for another time. Right now, I have a problem: The second "product-quantity" cell appears in the same place as the first "product-quantity" cell, when it should be directly on top of "Here Comes The Sun."

Can someone please help?

Thanks.

olup · Oct 1, 2020

Take a look at this article on responsive data tables. It's kind of hacky I guess, but it should get you closer to what you want to achieve.

NathanCH · Oct 1, 2020

Yeah repositioning table cells with absolute is tricky. I was able to position .product-quantity relative to the row, as your question asks, but im not sure this is the desired result: https://jsfiddle.net/76opguxf/

Here's another example converting your table to display: flex. I've hidden the heading, and positioned the quantity below the product name. https://jsfiddle.net/76opguxf/1/

Let me know if you wanted something different

Search

Search

How do I position a td element relative to its row?

moonman239

Cancelled

olup

Cancelled

NathanCH

macrumors 65816

Our Staff