How to freeze column 1 and scroll through other columns and rows in html with php and sql fields

Question

I have the following php generated table (drawing from sql database values) in which I want the first column (all the usernames) to be frozen (fixed) while the user can scroll horizontally and 'right' across the page to view the scores for each user.

I cannot figure out how to do this with the mix of php and html going on. Can anyone suggest a viable solution please?

An image for illustration purposes is below (I wish for the username column (all rows) to be fixed) while scrolling through to the right - there will be many more quizzes)

PHP and HTML Code

 <tbody>
                    <?php foreach(@$result as $record){?>
                    <tr>
                        <td><?php echo $record["username"];?></td>
                            <?php
                            $counter=0;

                            while(mysqli_num_rows($all_quizes) > $counter){
                                $current_td = mysqli_query($con,"SELECT * FROM quiz_takers WHERE username='".$record["username"]."' AND quiz_id=".$quizes[$counter][0]." ORDER BY marks DESC");
                                $td = mysqli_fetch_array($current_td);
                                if($td['percentage'] == null){
                                    echo "<td>-</td>";
                                }else{
                                    if(intval($td["percentage"]) >= 0 && intval($td["percentage"]) <= 30){
                                        $color = 'red';
                                    }elseif(intval($td["percentage"]) > 30 && intval($td["percentage"]) <= 70){
                                        $color = '#ffbf00';
                                    }elseif(intval($td["percentage"]) <= 30){

                                    }else{
                                        $color = 'green';
                                    }
                                    echo "<td style='color:".$color."'>".round($td["percentage"],2)."%</td>";

                                }

                                $counter++;
                            }
                            /*foreach($current_td as $td){
                                echo $counter." ".$td['username'] . " - ".$quizes[$counter]['3']."<br>";
                                if($quizes[$counter]['0'] == $td['quiz_id']){
                            ?>
                            <td><?php echo $td["percentage"];?></td>
                            <?php  } $counter++;}*/ ?>
                    </tr>
                        <?php  } ?>


                    </tbody>

UPDATE:

What I have tried, thanks to the helpful suggestion below regarding CSS is the following: It works, but not quite (messed up formatting)

CSS

<style type="text/css">
.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

.headcol:before {
  content: 'Row ';
}

        </style>

Added this line below:

<tbody>
                    <?php foreach(@$result as $record){?>
                    <tr>
                        <td><th class="headcol"><?php echo $record["username"];?></th></td>
                            <?php
                            $counter=0;

                            while(mysqli_num_rows($all_quizes) > $counter){
                                $current_td = mysqli_query($con,"SELECT * FROM quiz_takers WHERE username='".$record["username"]."' AND quiz_id=".$quizes[$counter][0]." ORDER BY marks DESC");
                                $td = mysqli_fetch_array($current_td);
                                if($td['percentage'] == null){
                                    echo "<td>-</td>";
                                }else{
                                    if(intval($td["percentage"]) >= 0 && intval($td["percentage"]) <= 30){
                                        $color = 'red';
                                    }elseif(intval($td["percentage"]) > 30 && intval($td["percentage"]) <= 70){
                                        $color = '#ffbf00';
                                    }elseif(intval($td["percentage"]) <= 30){

                                    }else{
                                        $color = 'green';
                                    }
                                    echo "<td style='color:".$color."'>".round($td["percentage"],2)."%</td>";

                                }

                                $counter++;
                            }
                            /*foreach($current_td as $td){
                                echo $counter." ".$td['username'] . " - ".$quizes[$counter]['3']."<br>";
                                if($quizes[$counter]['0'] == $td['quiz_id']){
                            ?>
                            <td><?php echo $td["percentage"];?></td>
                            <?php  } $counter++;}*/ ?>
                    </tr>
                        <?php  } ?>


                    </tbody>

HTML Result is skewed: comes up with this

instead of the desired:

@Richard - no - I am not sure how to go about doing that. Would I need an id to refer to? and if so, where would it go. Not an expert at CSS. — Compoot, Feb 28 '18 at 21:27
So, I found this, but how do I implement it inside of my existing php (and html) code to get it to work? https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body — Compoot, Feb 28 '18 at 21:30
I would say two separate tables, one for the usernames and the other table to contain quiz information, you can then style the username table to be fixed and style the quiz table to be scroll able etc — Richard, Feb 28 '18 at 21:31
@MissComputing if all users have 9 Quiz then just add an empty `` on this quiz slot if it is empty. in each row. — Toleo, Feb 28 '18 at 21:31
I've seen that suggested, but it would require an entire re-write. Isn't there just a way to fix the left hand column (first one), without creating two separate tables which seems unnecessarily wrong: like this https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body — Compoot, Feb 28 '18 at 21:32
@Toleo - as I've explained, there are many more than 9 quizzes. Users can have 100 quizzes. Hence the need for the scroll horizontally and the fixed first username column — Compoot, Feb 28 '18 at 21:32
@MissComputing Something like that? https://stackoverflow.com/a/1312678/9113120 — Toleo, Feb 28 '18 at 21:34
Possible duplicate of [how do I create an HTML table with fixed/frozen left column and scrollable body?](https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body) — Toleo, Feb 28 '18 at 21:39
See update - for what I have tried (nearly works) but not quite — Compoot, Feb 28 '18 at 21:39
Please see update - and yes, that @Toleo, but I can't get it working, that being the problem. That is NOT a duplicate, as it is included within php which adds to the complexity and the problem that I am posting — Compoot, Feb 28 '18 at 21:43
@MissComputing is your problem is building the html structure using html? if yes, post the result of html table structure. — Toleo, Feb 28 '18 at 21:44
Have posted the result, and the desired result @Toleo,. Thanks in advance :) — Compoot, Feb 28 '18 at 21:50
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166001/discussion-between-toleo-and-misscomputing). — Toleo, Feb 28 '18 at 21:56

How to freeze column 1 and scroll through other columns and rows in html with php and sql fields

0 Answers0