Why do some of the table elements showing inline?

HTML & CSS
,
1

Hi I am trying a version of responsive tables where the elements are displayed as ‘block’ when the screen size is reduced. I am just trying to understand why some of the elements of the table shows up inline while others don’t. For example the Price shows up inline and the quantity doesn’t. Here is the screen shot…

315×744 94.4 KB

Here is a live version of the problem … link

Here is my HTML

<!doctype html>
<html lang="en">
<head>

</head>
<body>     
<h1>Shopping Cart</h1>
<form action="/root/carts/update_cart" id="CartIndexForm" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"/><input type="hidden" name="data[_Token][key]" value="62fbffcdbc0e81095eb48be476416f6317f71a84" id="Token889349079"/></div></form>
<table class="cart">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Qty</th>
<th>Total</th>

</tr>
</thead>

<tbody>
<tr><td><img src="162558-1.jpg" alt="image-ridge" /></td></tr>
<tr><td><a href="/root/photo/ridge">&quot;Ridge&quot;</a></td></tr>
<tr><td>Some Kind of Print </td></tr>
<tr>
<td >5x7</td>
<td>5</td>
<td><input type="hidden" name="data[Cart][0][rate]" value="150" id="Cart0Rate"/><div class="input text"><input name="data[Cart][0][qty]" value="1" style="width:20px;" type="text" id="Cart0Qty"/></div></td>
<td >$5</td></tr>
</tbody>
</table>
</body>
</html>

and CSS

@media only screen and (max-width:399px){
    
body{width:98%;}

table, thead, tbody, th, td, tr { 
display: block; 
}
table { 
width: 100%; 
border-collapse: collapse; 

}

table img{
width:100%;
height:auto;

}

/* Zebra striping */
tr:nth-of-type(2) { 
background: #eee;
}

th { 
background: #333; 
color: white; 
font-weight: bold; 
}
td, th { 
padding: 3px 0 3px 0; 
border: 1px solid #ccc; 
text-align: left; 
}
thead tr { 
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; width:100%; }

td { 
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #eee; 
position: relative;
}


tr:nth-of-type(2):before { content: "Name"; text-transform: uppercase; padding-right:30px; }
td:nth-of-type(2):before { content: "Price$"; text-transform: uppercase; padding-right:30px; }
tr:nth-of-type(3):before { content: "Type"; text-transform: uppercase; padding-right:40px; }
td:nth-of-type(3):before { content: "Qty"; text-transform: uppercase; padding-right:53px; }
tr:nth-of-type(4):before { content: "Size"; text-transform: uppercase; padding-right:45px;}
td:nth-of-type(4):before { content: "Total"; text-transform: uppercase; padding-right:35px; }


}
2

Try deleting the <div> around the <input>:

change this:

<div class="input text"><input name="data[Cart][0][qty]" value="1" style="width:20px;" type="text" id="Cart0Qty"/></div>

to this:

<input name="data[Cart][0][qty]" value="1" style="width:20px;" type="text" id="Cart0Qty"/>

See what happens.

If it is serving a purpose, you could try styling the div as inline-block.

I often apply outlines to elements to see how they fit on a page. Outlines applied to these tags show that the <div class="input text "> is a block; therefore taking up another line.

1 Like
3

@ronpat thank you so much! Removing the <div> made the ‘qty’ field inline. The

was unnecessary… There are two other elements with same behavior

and I made sure there are no strange <div> s around! :smile: Just cannot figure these out…

4

On line 9 of your CSS, you have assigned the table elements to {display:block} and you are putting the generated content inside the <tr> tag so that leaves the <td> tag acting like a block object inside the <tr> tag. Thus, two lines.

Why not just put the generated content inside the <td> element?

You might want to read how Paul did something similar using data-attributes instead of directly entering the text for the generated content.

Media Queries Responsive - #165 by PaulOB

1 Like
5

Ahhh…!!Okay thank you @ronpat that explains it…thank you! I will change that and see what happens!

6

@ronpat Thank you!

This helped! :smile:

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.