html / CSS格式化中的小错误，以冻结PHP生成的SQL表中的第一列

Question

我有一个琐碎的错误，似乎没有人能够解决，但我确信它很简单，可能与CSS有关。

我希望冻结/修复第一列（即用户名），以便用户滚动其他列（测试，其中有很多）。

这现在有效，但用户名的定位与表的其余部分不同步。

它看起来像这样：

它应该看起来像：

PHP和HTML代码：

<?php  }elseif(isset($_POST['quiz']) && $_POST['quiz'] == "non" && $err == ""){ ?>

                <div class="col-sm-12">
            <div class="table-responsive">
                    <table class="table table-bordered table-striped table-condensed" id="table">

                    <thead>
                        <tr>
                            <td width="3%"></td>
                        <?php
                            $all_quizes = mysqli_query($con,"SELECT * FROM quizes ORDER BY FIELD(quiz_level, 'Beginner','Intermediate','Advanced'),quiz_name ASC");
                            $quizes = array();
                            while($my_rows = mysqli_fetch_array($all_quizes)){
                                array_push($quizes,$my_rows);
                            }
                            foreach($all_quizes as $record){
                        ?>

                        <th width="30%"><?php echo $record['quiz_name']; ?></th>
                        <?php } ?>
                        </tr>
                    </thead>

                    <tbody>
                    <?php foreach(@$result as $record){?>
                    <tr>

                        <td class="headcol"><?php echo $record["username"];?></td>
                            <?php
                            $counter=0;
                            echo "&nbsp;&nbsp;&nbsp;";
                            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>


                    </table>
                </div>
            </div>

目前的CSS是：

<style>



.headcol {

  position:absolute;
  height:100px;

  width: 5em;
  left: -10;


  overflow-x: scroll;
  margin-left: 5em;

  padding: 0;

  top: 2;
  border-top-width: -2px;
  /*only relevant for first row*/
  margin-top: -90px;
  /*compensate for top border*/
}



</style>

有人可以建议解决方案或修复？

Answer 1

我认为问题来自第一个标题行的第一列，您定义了3％的宽度。此宽度应等于.headcol的宽度

像这样的东西

<thead>
  <tr>
    <td width="5em"></td> //equal to the width of .headcol

此外，您可能需要调整.headcol的CSS，以便它可以更好地对齐，也许放left: 0;