移动友好数据表

Question

我正在尝试制作移动友好的桌子。 我已经将表格的格式更改为某个像素值的列表。 但是，当您使用电话时，标题与数据冲突。

在移动设备中，该表如下所示：

我只希望能够破坏标题，以便将发生冲突的部分包装到新行上。

<style>
        td {
            word-wrap: break-word;
        }
    /*
    Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
    */
    @media
      only screen 
    and (max-width: 1500px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

        /* Force table to not be like tables anymore */
        table, thead, tbody, th, td, tr {
            display: block;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    tr {
      margin: 0 0 1rem 0;
    }

    tr:nth-child(odd) {
      background: #ccc;
    }

        td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
                word-wrap: break-word;
        }

        td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 0;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;

        }

        /*
        Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
        */
        td:nth-of-type(1):before { content: "Date"; }
        td:nth-of-type(2):before { content: "Time"; }
        td:nth-of-type(3):before { content: "Aircraft"; }
        td:nth-of-type(4):before { content: "Passenger"; }
        td:nth-of-type(5):before { content: "Instructor"; }
        td:nth-of-type(6):before { content: "Fuel"; }
        td:nth-of-type(7):before { content: "Landings"; }
        td:nth-of-type(8):before { content: "Starting Tacho"; }
        td:nth-of-type(9):before { content: "Finishing Tacho"; }
        td:nth-of-type(10):before { content: "Flight Time"; }
        td:nth-of-type(11):before { content: "Aircraft Fees ($)"; }
        td:nth-of-type(12):before { content: "Instructor Fees ($)"; }
        td:nth-of-type(13):before { content: "GST ($)"; }
        td:nth-of-type(14):before { content: "Total Cost ($)"; }
    }
    </style>

 <tbody role="rowgroup">
    <?php 
     $sql = "SELECT * FROM flights WHERE LEFS_Member_Number = '$membernum' ORDER BY flight_number DESC";
      $result = $con->query($sql);
       while($row = $result->fetch_assoc()) {
           if ($row["passenger"] == null){
               $row["passenger"] = 'n/a';
           }

           if ($row["instructor"] == null){
               $row["instructor"] = 'n/a';
           }

            if ($row["instructor_fees"] == null){
               $row["instructor_fees"] = '0';
           }

        echo "<tr><td> ". $row["date"]."</td><td>" . $row["time"]. "</td><td>" . $row["aircraft"] . "</td><td>" . $row["passenger"]."</td><td>" . $row["instructor"]."</td><td>" . $row["fuel"]."</td><td>" . $row["landings"]."</td><td>" . $row["starting_tacho"]."</td><td>" . $row["finish_tacho"]."</td><td>" . $row["flight_time"]."</td><td> $" . $row["aircraft_fees"]."</td><td>$" . $row["instructor_fees"]."</td><td>$" . $row["gst"]."</td><td>$" . $row["total_cost"]."</td></tr>";
    }
      ?>
    </tbody>

Answer 1

使用这种方式

将您的需求基础更改为断点。

@media screen and (max-width: 640px) {}



var headertext = [],
    headers = document.querySelectorAll("#customDataTable th"),
    tablerows = document.querySelectorAll("#customDataTable th"),
    tablebody = document.querySelector("#customDataTable tbody");

for (var i = 0; i < headers.length; i++) {
    var current = headers[i];
    headertext.push(current.textContent.replace(/\r?\n|\r/, ""));
}
for (var i = 0, row; row = tablebody.rows[i]; i++) {
    for (var j = 0, col; col = row.cells[j]; j++) {
        col.setAttribute("data-th", headertext[j]);
    }
}

  var headertext = [], headers = document.querySelectorAll("#customDataTable th"), tablerows = document.querySelectorAll("#customDataTable th"), tablebody = document.querySelector("#customDataTable tbody"); for (var i = 0; i < headers.length; i++) { var current = headers[i]; headertext.push(current.textContent.replace(/\\r?\\n|\\r/, "")); } for (var i = 0, row; row = tablebody.rows[i]; i++) { for (var j = 0, col; col = row.cells[j]; j++) { col.setAttribute("data-th", headertext[j]); } } 

 @media screen and (max-width: 640px) { table#customDataTable caption { background-image: none; } table#customDataTable thead { display: none; } table#customDataTable tbody td { display: block; padding: .6rem; } table#customDataTable tbody tr td:first-child { background: #666; color: #fff; } table#customDataTable tbody tr td:first-child a { color: #fff; } table#customDataTable tbody tr td:first-child:before { color: rgb(225, 181, 71); } table#customDataTable tbody td:before { content: attr(data-th); font-weight: bold; display: inline-block; width: 10rem; } table#customDataTable tr th:last-child, table#customDataTable tr td:last-child { max-width: 100% !important; min-width: 100px !important; width: 100% !important; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table" id="customDataTable"> <thead> <tr> <th>#</th> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>City</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Anna</td> <td>Pitt</td> <td>35</td> <td>New York</td> <td>USA</td> </tr> <tr> <td>1</td> <td>Anna</td> <td>Pitt</td> <td>35</td> <td>New York</td> <td>USA</td> </tr> </tbody> </table>