移动友好数据表

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>