Прокручиваемая PHP "сгенерированная" Таблица С Фиксированным Заголовком

ProgramBox

Прокручиваемая PHP «сгенерированная» Таблица С Фиксированным Заголовком

Post author:admin
Запись опубликована:15 января, 2022
Post category:Вопросы по программированию

#php #html #css

Вопрос:

Я пытаюсь отобразить таблицу (прокручиваемую) с фиксированным заголовком. И, похоже, это не работает. Я поискал в Интернете решения, но ни одно из них не работает… Во всех примерах в Интернете используются таблицы с данными, вставленными вручную в HTML-код. Но здесь я вызываю данные из базы данных с помощью PHP.

PHP/HTML

 <?php
include ('sambungan.php');
?>

<link rel = "stylesheet" href = "senarai.css">

<h2>SENARAI NAMA PELAJAR</h2>
<div class = 'senarai'>
<table>
    <tr class = 'header'>
        <th>ID</th>
        <th>No Kad Pengenalan</th>
        <th>Nama</th>
        <th>Katalaluan</th>
        <th>E-mel</th>
    </tr>
    <div class = 'tbl_content'>
        <?php
        $sql = 'select murid.id_murid , murid.no_kp_murid , nama_murid.nama_murid , murid.katalaluan , nama_murid.email_murid FROM murid INNER JOIN nama_murid ON nama_murid.id_nama = murid.id_nama';
        $result = mysqli_query($sambungan,$sql);
        while($pelajar = mysqli_fetch_array($result))
        {
                echo '<tr class = "data">
                <td>'.$pelajar["id_murid"].'</td> 
                <td>'.$pelajar["no_kp_murid"].'</td>
                <td>'.$pelajar["nama_murid"].'</td>
                <td>'.$pelajar["katalaluan"].'</td>
                <td>'.$pelajar["email_murid"].'</td>
                </tr>';
        }
        ?>
    </div>
</table>
</div>

CSS

 table
{
    font-family: 'Cutive Mono' , monospace;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
    
    width: 1600px;
    max-height: 500px;
    border-spacing: 0 1rem;
}

div.senarai
{
  height: 530px;
  width: 1600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 25px;
  padding: 1.5rem;
  box-shadow: 8px 8px 15px var(--shadowDark), -8px -8px 15px var(--shadowLight);
}

.header
{
    position: sticky;
    background-color: #405D4F;
    font-size: 1.2rem;
    z-index: 1;
}

th
{
    font-weight: bold;
    color: white;
    height: 70px !important;
    background-color: #405D4F;
}

td,th
{
    box-sizing: border-box;
    height: 50px;
    padding: 8px;
}

div.tbl_content
{
    overflow-y: scroll;
}

Я заметил, что PHP-код, похоже, не помещен в раздел «tbl_content». Потому что, когда я регулирую высоту div, таблица опускается, и над ней остается пустое пространство, как если бы div был над столом? почему?

1. Попробуйте задать вашему div.tbl_content фиксированную высоту, скажем, 400 пикселей, и переполнение-x: скрыто; переполнение-y : автоматически, если это работает, отрегулируйте высоту так, как вы хотите.

2. Не используйте table > div . Но вы можете использовать div внутри th и td

3. @NicholasMberev это все равно не работает. Как я уже сказал…div «толкает» таблицу вниз, когда на самом деле таблица должна быть внутри div, верно? Это так сбивает с толку. Я схожу с ума из-за этого

4. @user3733831 Извините, я не совсем понимаю, что вы имеете в виду. Но я попробовал поместить div.tbl_content его внутрь функции php. это означает, что div повторяется функцией php. Все равно ничего не получалось. Произошло то же самое, как если бы div находился над столом?

Ответ №1:

Вы пробовали jQuery DataTable? Он также имеет больше функций, таких как Paging , Sorting Searching , и т. Fixed header Д. Более того, его очень легко реализовать и использовать.

Официальный пример документов: https://datatables.net/examples/index

 $('#example').DataTable( {
  "scrollY":        "200px",
  "scrollCollapse": true,
  "paging":         false
} );

Приведенный выше код предназначен для реализации прокручиваемой таблицы с фиксированным заголовком с помощью jQuery DataTable.

1. Я бы с удовольствием попробовал jQuery, так как он мощный. Но, к сожалению, у меня нет опыта работы с jQuery..и это для моего школьного проекта последнего года. Так что да, на самом деле я не хочу рисковать. тем не менее, jQuery был бы последним средством. Если все не сработает

Ответ №2:

Вы не можете расположить: sticky; a <thead> . И не а <tr> . Но вы можете прикрепить a <th> , что означает, что вы можете сделать липкие заголовки внутри обычного ol’ <table> . Посмотрите этот учебник.

Просто начните с:

 body {
  margin: 0;
  padding: 2rem;
}

table {
  text-align: left;
  position: relative;
  border-collapse: collapse; 
}
th, td {
  padding: 0.25rem;
}
tr.red th {
  background: red;
  color: white;
}

th {
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

 <table>
  <thead>
    <tr class="red">
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
      <th>Color</th>
      <th>URL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Qui!</td>
      <td>Accusamus?</td>
      <td>Minima?</td>
      <td>Dolorum.</td>
      <td>Molestiae.</td>
    </tr>
    <tr>
      <td>Vero!</td>
      <td>Voluptatum?</td>
      <td>Ea?</td>
      <td>Odit!</td>
      <td>A.</td>
    </tr>
    <tr>
      <td>Debitis.</td>
      <td>Veniam.</td>
      <td>Fuga.</td>
      <td>Alias!</td>
      <td>Recusandae!</td>
    </tr>
    <tr>
      <td>Aperiam!</td>
      <td>Dolorum.</td>
      <td>Enim.</td>
      <td>Sapiente!</td>
      <td>Suscipit?</td>
    </tr>
    <tr>
      <td>Consequuntur.</td>
      <td>Doloremque.</td>
      <td>Illum!</td>
      <td>Iste!</td>
      <td>Sint!</td>
    </tr>
    <tr>
      <td>Facilis.</td>
      <td>Error.</td>
      <td>Fugiat.</td>
      <td>At.</td>
      <td>Modi?</td>
    </tr>
    <tr>
      <td>Voluptatibus!</td>
      <td>Alias.</td>
      <td>Eaque.</td>
      <td>Cum.</td>
      <td>Ducimus!</td>
    </tr>
    <tr>
      <td>Nihil.</td>
      <td>Enim.</td>
      <td>Earum?</td>
      <td>Nobis?</td>
      <td>Eveniet.</td>
    </tr>
    <tr>
      <td>Eum!</td>
      <td>Id?</td>
      <td>Molestiae.</td>
      <td>Velit.</td>
      <td>Minima.</td>
    </tr>
    <tr>
      <td>Sapiente?</td>
      <td>Neque.</td>
      <td>Obcaecati!</td>
      <td>Earum.</td>
      <td>Esse.</td>
    </tr>
    <tr>
      <td>Nam?</td>
      <td>Ipsam!</td>
      <td>Provident.</td>
      <td>Ullam.</td>
      <td>Quae?</td>
    </tr>
    <tr>
      <td>Amet!</td>
      <td>In.</td>
      <td>Officia!</td>
      <td>Natus?</td>
      <td>Tempore?</td>
    </tr>
    <tr>
      <td>Consequatur.</td>
      <td>Hic.</td>
      <td>Officia.</td>
      <td>Itaque?</td>
      <td>Quasi.</td>
    </tr>
    <tr>
      <td>Enim.</td>
      <td>Tenetur.</td>
      <td>Asperiores?</td>
      <td>Eos!</td>
      <td>Libero.</td>
    </tr>
    <tr>
      <td>Exercitationem.</td>
      <td>Quidem!</td>
      <td>Beatae?</td>
      <td>Adipisci?</td>
      <td>Accusamus.</td>
    </tr>
    <tr>
      <td>Omnis.</td>
      <td>Accusamus?</td>
      <td>Eius!</td>
      <td>Recusandae!</td>
      <td>Dolor.</td>
    </tr>
    <tr>
      <td>Magni.</td>
      <td>Temporibus!</td>
      <td>Odio!</td>
      <td>Odit!</td>
      <td>Voluptatum?</td>
    </tr>
    <tr>
      <td>Eum.</td>
      <td>Animi!</td>
      <td>Labore.</td>
      <td>Alias!</td>
      <td>Fuga.</td>
    </tr>
    <tr>
      <td>Quia!</td>
      <td>Quis.</td>
      <td>Neque?</td>
      <td>Illo.</td>
      <td>Ad.</td>
    </tr>
    <tr>
      <td>Officiis.</td>
      <td>Exercitationem!</td>
      <td>Adipisci?</td>
      <td>Officiis?</td>
      <td>In?</td>
    </tr>
    <tr>
      <td>Voluptates?</td>
      <td>Voluptatum.</td>
      <td>Nihil.</td>
      <td>Totam?</td>
      <td>Quisquam!</td>
    </tr>
    <tr>
      <td>Soluta.</td>
      <td>Tempore!</td>
      <td>Cupiditate.</td>
      <td>Beatae.</td>
      <td>Perspiciatis.</td>
    </tr>
    <tr>
      <td>Porro.</td>
      <td>Officia?</td>
      <td>Error.</td>
      <td>Culpa?</td>
      <td>Fugit.</td>
    </tr>
    <tr>
      <td>Et?</td>
      <td>Nemo.</td>
      <td>Nisi?</td>
      <td>Totam!</td>
      <td>Voluptate.</td>
    </tr>
    <tr>
      <td>Saepe?</td>
      <td>Vero.</td>
      <td>Amet?</td>
      <td>Illo!</td>
      <td>Laborum!</td>
    </tr>
   
    <tr>
      <td>Blanditiis?</td>
      <td>Impedit.</td>
      <td>Libero?</td>
      <td>Reiciendis!</td>
      <td>Tempore.</td>
    </tr>
    <tr>
      <td>Quasi.</td>
      <td>Reiciendis.</td>
      <td>Aut?</td>
      <td>Architecto?</td>
      <td>Vero!</td>
    </tr>
    <tr>
      <td>Fuga!</td>
      <td>Illum!</td>
      <td>Tenetur!</td>
      <td>Vitae.</td>
      <td>Natus.</td>
    </tr>
    <tr>
      <td>Dolorem?</td>
      <td>Eaque!</td>
      <td>Vero?</td>
      <td>Quibusdam.</td>
      <td>Deleniti?</td>
    </tr>
    <tr>
      <td>Minus.</td>
      <td>Accusantium?</td>
      <td>Ab.</td>
      <td>Cupiditate.</td>
      <td>Atque?</td>
    </tr>
    <tr>
      <td>Hic.</td>
      <td>Eligendi.</td>
      <td>Sit?</td>
      <td>Nihil.</td>
      <td>Dolor.</td>
    </tr>
    <tr>
      <td>Quidem.</td>
      <td>In?</td>
      <td>Nesciunt?</td>
      <td>Adipisci.</td>
      <td>Neque.</td>
    </tr>
    <tr>
      <td>Eos.</td>
      <td>Incidunt!</td>
      <td>Quis?</td>
      <td>Quod?</td>
      <td>Vitae!</td>
    </tr>
    <tr>
      <td>Ullam!</td>
      <td>Facilis.</td>
      <td>Tempora!</td>
      <td>Accusantium.</td>
      <td>Consequuntur?</td>
    </tr>
    <tr>
      <td>Numquam?</td>
      <td>At.</td>
      <td>Incidunt.</td>
      <td>Tenetur?</td>
      <td>Voluptatem.</td>
    </tr>
    <tr>
      <td>Iusto?</td>
      <td>Inventore.</td>
      <td>Molestias.</td>
      <td>Accusantium.</td>
      <td>Sunt.</td>
    </tr>
    <tr>
      <td>Repellendus!</td>
      <td>Ex.</td>
      <td>Magnam.</td>
      <td>Odit!</td>
      <td>Iste?</td>
    </tr>
    <tr>
      <td>Id!</td>
      <td>Reiciendis?</td>
      <td>Rem.</td>
      <td>Quae!</td>
      <td>Laborum?</td>
    </tr>
    <tr>
      <td>Exercitationem?</td>
      <td>Maiores.</td>
      <td>Minima.</td>
      <td>Nemo!</td>
      <td>Sequi.</td>
    </tr>
    <tr>
      <td>Qui.</td>
      <td>Impedit?</td>
      <td>Reprehenderit.</td>
      <td>Distinctio.</td>
      <td>Natus?</td>
    </tr>
    <tr>
      <td>Suscipit!</td>
      <td>Tenetur.</td>
      <td>Cumque!</td>
      <td>Molestiae.</td>
      <td>Fugiat?</td>
    </tr>
    <tr>
      <td>Sunt?</td>
      <td>Quis?</td>
      <td>Officia.</td>
      <td>Incidunt.</td>
      <td>Voluptate.</td>
    </tr>
    <tr>
      <td>Possimus.</td>
      <td>Mollitia!</td>
      <td>Eveniet!</td>
      <td>Temporibus.</td>
      <td>Mollitia!</td>
    </tr>
    <tr>
      <td>Incidunt.</td>
      <td>Fugiat.</td>
      <td>Error.</td>
      <td>Odit.</td>
      <td>Cumque?</td>
    </tr>
    <tr>
      <td>Maxime?</td>
      <td>Qui!</td>
      <td>Sapiente!</td>
      <td>Natus.</td>
      <td>Soluta?</td>
    </tr>
  </tbody>
</table>

ОБНОВЛЕНИЕ: Пример липкой таблицы с PHP данными. То же CSS самое из моего приведенного выше фрагмента кода используется и для этого примера.

 <?php
   $users =  [['id'=>1, 'name'=>'User Name 1', 'address'=>'User Address 1']
          ,['id'=>2, 'name'=>'User Name 2', 'address'=>'User Address 2']
          ,['id'=>3, 'name'=>'User Name 3', 'address'=>'User Address 3']
          ,['id'=>4, 'name'=>'User Name 4', 'address'=>'User Address 4']
          ,['id'=>5, 'name'=>'User Name 5', 'address'=>'User Address 5']
          ,['id'=>6, 'name'=>'User Name 6', 'address'=>'User Address 6']
          ,['id'=>7, 'name'=>'User Name 7', 'address'=>'User Address 7']
          ,['id'=>8, 'name'=>'User Name 8', 'address'=>'User Address 8']
          ,['id'=>9, 'name'=>'User Name 9', 'address'=>'User Address 9']
          ,['id'=>10, 'name'=>'User Name 10', 'address'=>'User Address 10']
          ,['id'=>11, 'name'=>'User Name 11', 'address'=>'User Address 11']
          ,['id'=>12, 'name'=>'User Name 12', 'address'=>'User Address 12']
          ,['id'=>13, 'name'=>'User Name 13', 'address'=>'User Address 13']
          ,['id'=>14, 'name'=>'User Name 14', 'address'=>'User Address 14']
          ,['id'=>15, 'name'=>'User Name 15', 'address'=>'User Address 15']
          ,['id'=>16, 'name'=>'User Name 16', 'address'=>'User Address 16']
          ,['id'=>17, 'name'=>'User Name 17', 'address'=>'User Address 17']
          ,['id'=>18, 'name'=>'User Name 18', 'address'=>'User Address 18']
          ,['id'=>19, 'name'=>'User Name 19', 'address'=>'User Address 19']
          ,['id'=>20, 'name'=>'User Name 20', 'address'=>'User Address 20']
          ];

$tdata ='';
foreach ($users as $key => $value) {
  $id      = $value['id'];
  $name    = $value['name'];
  $address = $value['address'];

  $tdata .= "<tr><td>$id</td><td>$name</td><td>$address</td><tr>n";
}

?>

<table>
  <thead>
    <tr class="red">
      <th>ID</th>
      <th>Name</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <?=$tdata?>
  </tbody>
</table>

Выход:

Другой пример с данными вашей таблицы: если ваш запрос извлекает результат, это должно сработать.

 $sql = 'select m.id_murid
             , m.no_kp_murid 
             , n.nama_murid 
             , m.katalaluan 
             , n.email_murid 
        FROM murid AS m
          INNER JOIN nama_murid AS n ON n.id_nama = m.id_nama';
$result = mysqli_query($sambungan,$sql);
while($pelajar = mysqli_fetch_array($result)) {
  $html .= '<tr class="data">
              <td>'.$pelajar["id_murid"].'</td> 
              <td>'.$pelajar["no_kp_murid"].'</td>
              <td>'.$pelajar["nama_murid"].'</td>
              <td>'.$pelajar["katalaluan"].'</td>
              <td>'.$pelajar["email_murid"].'</td>
            </tr>';
}

<table>
  <thead>
    <tr class='header'>
      <th>ID</th>
      <th>No Kad Pengenalan</th>
      <th>Nama</th>
      <th>Katalaluan</th>
      <th>E-mel</th>
    </tr>
  </thead>
  <tbody>
    <?=$html?>
  </tbody>
</table>

1. Спасибо вам за информацию. Полезные знания, но моя проблема здесь, похоже, в том, что таблица даже не может прокручиваться вниз 🤣

2. Вы уверены, что получаете данные из своего SELECT запроса?

3. Да, я уверен. Потому что данные отображаются идеально. Он просто не прокручивается.

4. Я не знаю. Я даже не могу проверить, соответствует ли заголовок stc, потому что таблица даже не прокручивается

Метки: Прокручиваемая PHP «сгенерированная» Таблица С Фиксированным Заголовком