Горизонтальная прокрутка до самого правого столбца в таблице, пока ничего не будет видно между первым и последним столбцами - PullRequest
Новая
       89

Горизонтальная прокрутка до самого правого столбца в таблице, пока ничего не будет видно между первым и последним столбцами

0 голосов
/ 25 мая 2020

Цель: легко сравнить td в первом столбце с другими столбцами, включая последний.

У меня есть небольшая таблица, загружаемая из Mysql DB, где я хочу легко сравнить td в первый столбец с другими столбцами, включая последний.

Я следовал принципам https://jsfiddle.net/qwubvg9m/1/, и он работал нормально.

Что касается вертикальной прокрутки, я добился желаемого эффекта, добавив несколько строк «br» к конец скрипта - некрасивый код, но простой.

Я могу вызвать горизонтальную прокрутку, увеличив масштаб на 500%, но это полностью разрушает общий вид таблицы.

Есть взлом как уродливое добавление «br», которое можно использовать для горизонтальной прокрутки?

Вот код: 

<!DOCTYPE html>
<html lang="da">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
    body {
        margin-right: auto;
        margin-left: auto;
        width: 650px;
    }

    div {}

    table {
        position: relative;
        border-collapse: collapse;
    }

    thead th {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        padding: 5px;
        background-color:lavender;
        border: 1px solid;
    } 
    background: #FFF;
    border-right: 1px solid #CCC;
    }

    /* Lavenderblush-farvede zebrastriber  */
    tbody tr:nth-child(even){
        background-color:lavenderblush;
    }
    </style>
</head>

<body>
    <hr />
    <br /><button onclick="window.location.href = '../index.php';">Tilbage til forsiden</button>
    <br /><br />
    <hr />

    <?php
    $servername = "xxx";
    $username = "yyy";
    $password = "zzz";
    $dbname = "www";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);

    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    // Nødvendig, hvis server er mysql6,dandomain.dk 
    // $conn->set_charset("utf8mb4");


    $sql = "SELECT 
    person.pID, name, 
    sommerhus.sID, svejnavnOgNr, 
    folkeregadr.fID, fvejnavnOgNr 
    /* person ejer sommerhus bebor folkeregisteradr */
    FROM person, ejers, sommerhus, beborf, folkeregadr
    WHERE person.pID=ejers.pID
        AND ejers.sID =sommerhus.sID
        AND person.pID=beborf.pID
        AND beborf.fID=folkeregadr.fID
    ORDER BY svejnavnOgNr
    limit 0, 60";   

    $result = $conn->query($sql);

    echo "<div>
    <table border='1'>
        <caption>TEST</caption>
        <thead>
            <tr>
                <th>pID</th>
                <th>name</th>
                <th>sID</th>
                <th>svejnavnOgNr</th>
                <th>fID</th>
                <th>fvejnavnOgNr</th>
            </tr>
        </thead>";

    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) { 
            "<tbody>"; // uden echo
            echo "<tr>";
            echo "  <th>".$row['pID']."</th>";
            echo "  <td>".$row['name']."</td>";
            echo "  <td>".$row['sID']."</td>";
            echo "  <td>".$row['svejnavnOgNr']."</td>";
            echo "  <td>".$row['fID']."</td>";
            echo "  <td>" . $row['fvejnavnOgNr']."</td>";
            echo "</tr>";
            "</tbody>";
        }
    echo "</table>"; 
    echo "</div>";
    } else { 
        echo "0 results";
    }
    $conn->close();
    ?>

    <br /><button onclick="window.location.href = '../index.php';">Tilbage til forsiden</button>

    <br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
</body>
</html>

Извините, я думаю, что на вопрос уже был дан ответ, см. вопросы / 44254074 / table-that-scrolls-Horizontally-but-with-fixed-first-column, с двумя ответами.

Вот мой последний код. Ключевым моментом является ширина в теле {}. 

<!DOCTYPE html>
<html lang="da">
<head>
    <meta charset="UTF-8">
  <title>test</title>
    <style>

    /* The size of width makes 
    horizontal scrollbar "big" enough */ 
    body {
    margin-right: auto;
    margin-left: auto;
    width: 1900px;
    }

    div { 
      margin-left: 12%; 
    }

    table {
      position: relative;
      border-collapse: collapse;
    }

    thead th {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      padding: 5px;
      background-color:lavender;
      border: 1px solid;
    }

    thead th:first-child {
      left: 0;
      z-index: 1;
    }

    tbody th {
      position: -webkit-sticky; /* for Safari */
      position: sticky;
      left: 0;
      background: #FFF;
      border-right: 1px solid #CCC;
    }

    /* Lavenderblush-farvede zebrastriber  */
    tbody tr:nth-child(even){
    background-color:lavenderblush;
    }
    </style>
  </head>
<body>
  <div>  
    <br/><button onclick="window.location.href = '../index.php';">Tilbage til forsiden</button>
      <br /><br />


    <?php

    $servername = "xxx";
    $username = "yyy";
    $password = "zzz";
    $dbname = "www";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);

    // Check connection
    if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
    } 

    $conn->set_charset("utf8mb4");


    $sql = "SELECT 
    person.pID, name, 
    sommerhus.sID, svejnavnOgNr, 
    folkeregadr.fID, fvejnavnOgNr 

    FROM person, ejers, sommerhus, beborf, folkeregadr
    WHERE person.pID=ejers.pID
        AND ejers.sID =sommerhus.sID
        AND person.pID=beborf.pID
        AND beborf.fID=folkeregadr.fID
    ORDER BY svejnavnOgNr
    limit 0, 60";   

    $result = $conn->query($sql);

    echo "
    <table border='1'>
      <caption>TEST</caption>
        <thead>
        <tr>
          <th>pID</th>
          <th>name</th>
          <th>sID</th>
          <th>svejnavnOgNr</th>
                <th>fID</th>
        <th>fvejnavnOgNr</th>
          </tr>
        </thead>";

    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) { 
            "<tbody>"; // uden echo
             echo "<tr>";
                echo "<th>" . $row['pID'] . "</th>";
                echo "<td>" . $row['name'] . "</td>";     
                echo "<td>" . $row['sID'] . "</td>";
                echo "<td>" . $row['svejnavnOgNr'] . "</td>";
              echo "<td>" . $row['fID'] . "</td>";
        echo "<td>" . $row['fvejnavnOgNr'] . "</td>";             
             echo "</tr>";
      "</tbody>";
        }
    echo "</table>"; 
    } else { 
        echo "0 results";
    }
    $conn->close();
    ?>

    <br/><button onclick="window.location.href = '../index.php';">Tilbage til forsiden</button>
 </div>      
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br />    
</body>
</html>
...