Help needed with HTML/CSS

[Abhas]

I need to regularly print a 3 column table, which is not very wide, but has a lot of rows. If I print it as is, it would waste a lot of paper, and if I copy it over to excel, and then try and arrange it, it takes up a lot of my time.
I want that the table should print 3 columns on a page from the browser itself, like how I've illustrated in the image:


I need the data from the first block to continue onto the 2nd block, and similarly to the third. From there, it can break onto the next page, with the same layout. Is there any way I can achieve that?

I am ready to forego the html table, if it can be properly done with CSS.

 

[A.R123 Max]

So you only want to make 3 columns or like it is mentioned in the pic.

 

[themusketeer]

I am not totally getting you but here are some links that may work for your problem.

Printing HTML table with many columns/rows using CSS layout? - Stack Overflow

css - How to deal with page breaks when printing a large HTML table - Stack Overflow

html - How to apply CSS page-break to print a table with lots of rows? - Stack Overflow

 

[Abhas]

Sorry, I might have gotten you confused with the word "column", I would like it like the picture illustrates.

Consider an A4 sheet to be a grid of 30 rows and 9 columns. My data is 90 rows and 3 columns. If I print it directly, it would print on 3 sheets, wasting a lot of white space on each of them.
I want my data to continue on the same sheet, and utilise all 9 columns of the A4 sheet.

 

[themusketeer]

You can do it with <div> ,right ? Define 3 divisions and each div contains " 3 columns & 30 rows" and then align them using <style> or CSS side by side.

 

[Abhas]

You can do it with <div> ,right ? Define 3 divisions and each div contains " 3 columns & 30 rows" and then align them using <style> or CSS side by side.

Yeah, how?

Just help me with the CSS, I'll figure out how to manipulate the data.

 

[themusketeer]

Yeah, how?

Here it is, See if that solves your problem.



Check the above preview.

The HTML & CSS file is attached. You can manipulate the data as per your requirement.

 

[Abhas]

Oh well, that's rather crude. I was expecting something that uses CSS to create the same - more like Div blocks.
Breaking the table into 3, that too, not in order is wrong on so many levels.

for ($i=0; $i<100; $i++)
{

echo "          <tr>
                    <td>row $i</td>
                    <td>row $i</td>
                    <td>row $i</td>    
                </tr>
";
}

Consider the data in this format, it is not a very pretty solution to have a break in the data, jump the data forward x rows, then jump the data back 2x rows.

Anyway, thanks a lot for the help so far, if nothing works, atleast this will.

 

[Abhas]

Ok, finally managed to do it. Instead of the table going left - right - center, now the table goes left-center-right, which is much more convenient to work with. The table is exactly how I wanted it, and a simple thing like this saves a great deal of my time, and ofcourse, a lot of paper (unfortunately, printing is necessary).

Thanks again for the help, @themusketeer

CSS:

<style>
  .left{
  float:left;
  width:30%;
  margin-right:3%;
}
table, th, td {
    border: 1px solid black;
    table-layout: fixed;
    overflow:hidden;
    white-space: nowrap;
}
.sku {
    width:20%;
}
.style {
    width:35%;
}
.item {
    width:45%;
}
.page-break {
    page-break-before: always;
    padding-top:20px;
    padding-bottom:20px;
}
</style>

PHP Code:

$no_rows=50; // No of rows to print per page. (where the tables break)
$x=0;
$page=1;
$sql="some SQL to fetch data here";
while($row=mysqli_fetch_array($sql))
{
    $x++;
    if ($x<=$no_rows)
    {
        if ($x==1)
        {
            echo "<table class=left>
            <tr>
                <th class=item>Item</th>
                <th class=style>Style</th>
                <th class=sku>SKU</th>
            </tr>";
        }
        echo "<tr>";
        echo "<td>$row[0]</td>";
        echo "<td>$row[1]</td>";
        echo "<td>$row[2]</td>";
        echo "</tr>";
        if ($x==$no_rows)
            echo "</table>";
    }
    else if ($x>$no_rows and $x<=$no_rows*2)
    {
        if ($x==$no_rows+1)
        {
            echo "<table class=left>
            <tr>
                <th class=item>Item</th>
                <th class=style>Style</th>
                <th class=sku>SKU</th>
            </tr>";
        }
        echo "<tr>";
        echo "<td>$row[0]</td>";
        echo "<td>$row[1]</td>";
        echo "<td>$row[2]</td>";
        echo "</tr>";
        if ($x==$no_rows*2)
            echo "</table>";
    }
    else if ($x>$no_rows*2 and $x<=$no_rows*3)
    {
        if ($x==$no_rows*2 + 1)
        {
            echo "<table class=left>
            <tr>
                <th class=item>Item</th>
                <th class=style>Style</th>
                <th class=sku>SKU</th>
            </tr>";
        }
        echo "<tr>";
        echo "<td>$row[0]</td>";
        echo "<td>$row[1]</td>";
        echo "<td>$row[2]</td>";
        echo "</tr>";
        if ($x==$no_rows*3)
            echo "</table>";
    }
    else
    {
        $page++;
        echo "<div class='page-break'> Page $page</div>";
        $x=0;
    }
}

 

[themusketeer]

@Abhas I opted for an easy way which doesn't use too much of CSS . and does the printing work.
Anyway, Good to know you found a way.