CODEWITHSUNDEEP
phpcsshtml
GantzisGoat
GantzisGoat

Reputation: 49

Limit content inside the div by its size

I'm dynamically filling a table of content fetch from the database. This table is inside a <div>

So I'm setting a variable $col to limit how much columns I want each row (by default I saw 5 fit perfectly) in the div. Otherwise the table content just goes outside the div.

The problem is I had to set that manually. I looked around a lot how to make any content inside div and
once it colides with the border but couldn't find anything. If I could have the same result without using tables which are the problem I think . I'll be glad to update that.

$col = 1; //initialisation

foreach ($result as $product){ //a loop to fetch data into product object
if($product->visible == 1){
    if($Col < 6){
   echo "<td>";
   echo "<a href ='read.php?id=".$product->id_product."&p=0'><div class='productdiv'>";
   echo "<img src ='galleries/".$product->id_product."/c".$product->id_product.".jpg' alt = 'cover' width='220' height='300'><h4 class='productclass'>".$product->name_product."</h4>";
   echo "</div></a>";
   echo "</td>";
   $col= $col+ 1; //here I'm incrementing
   }
  else{ //I close the line <tr> then another line begin
echo "</tr><tr><td>";
echo "<a href ='read.php?id=".$product->id_hentai."&p=0'><div class='hendiv'>";
 echo "<img src ='galleries/".$product->id_product."/c".$product->id_product.".jpg' alt = 'cover' width='220' height='300'><h4 class='productclass'>".$product->name_product."</h4>";
   echo "</div></a>";
   echo "</td>";
   $col= 1;
}//end the code

result

Upvotes: 2

Views: 159

Answers (2)

Selvarani
Selvarani

Reputation: 320

Please use

display: inline-block

It will accommodate the content. And where you have open the <tr> in "if" condition.

Upvotes: 1

NoOorZ24
NoOorZ24

Reputation: 3222

Not fully sure I understood your question but this sounds like a job for JS

1 You should read all possible columns from db and create table from them but set visibility to hidden.

2 Then add JS and define column priorities.

3 Get maximum allowed width for table.

4 Using JS read width of all you cells

5 By priority sum your cell width until it's > max width

6 hide cells with lesser priority that can't fit

Upvotes: 0

Related Questions