html - 响应页面在表格中不起作用

Question

目前我正在为这个元素使用 bootstrap 和我的个人 css 文件。我已经定义了页面包装类来区分菜单项和内容。该表在广泛的视野中工作正常。 Working(desktop view)

但是在移动端 View 中一半的内容显示在深色背景中

Mobile view(not working)

代码:

页面的 PHP 代码:

    <?php
include "includes/header.php" 

?>
<div id="wrapper">
   <!-- Navigation Bar -->
<?php include "includes/navigation.php" ?>
           <div id="page-wrapper">
            <div class="container-fluid">



<?php

$query = "SELECT * FROM patent_details where sap_id='$sap'";

$result = mysqli_query( $conn, $query );?>                

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">    
                        <h1 class="page-header dash-head">
                            <center>Patent View</center>      <!-- All data defined here-->
                        </h1>
                        <table class="table">
                            <thead>
                                <th>Patent ID</th>
                                <th>Author other than UPES</th>
                                <th>Department</th>
                                <th>File Application No</th>
                                <th>Filling Date</th>
                                <th>Country</th>
                                <th>Patent Status</th>
                                <th>Currency</th>
                                <th>Income Generated</th>
                            </thead>
                            <tbody>


        <?php

        if( mysqli_num_rows($result) > 0 ) {

         while( $row = mysqli_fetch_assoc($result) ) {
            $patent_id = $row['patent_id'];
            $auther_other_than_UPES = $row['author_other_than_UPES'];
            $department = $row['department'];
            $file_application_no = $row['file_application_no'];
            $filing_date  = $row['filing_date'];
            $country = $row['country'] ;
            $patent_status = $row['patent_status'];
            $currency = $row['currency'];
            $income_generated = $row['faculty_income_generated_through_patents'];






            echo "<tr>";
            echo "<td>$patent_id</td>";
            echo "<td>$auther_other_than_UPES</td>";
            echo "<td>$department</td>";
            echo "<td>$file_application_no</td>";
            echo "<td>$filing_date</td>";
            echo "<td>$country</td>";
            echo "<td>$patent_status</td>";
            echo "<td>$currency</td>";
            echo "<td>$income_generated</td>";
            echo "<td><a type='button' href='patent_edit.php?id=".$patent_id."' >Edit</a>;</td>";
            echo "</tr>";

        }

    } 
 else {

    echo "No data available"; 

}
                                ?>

                     </tbody>
                    </table>

<?php include "includes/footer.php"
?>

页面的 CSS 代码:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    margin-top: 100px;
    background-color: #222;

}


@media(min-width:768px) {
    body {
        margin-top: 50px;
    }
}

#wrapper {
    padding-left: 0;
}

#page-wrapper {
    width: 100%;
    padding: 0;
    background-color: #fff;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 225px;
    }

    #page-wrapper {
        padding: 10px;
    }
}

/* Top Navigation */

.top-nav {
    padding: 0 15px;
}

.top-nav>li {
    display: inline-block;
    float: left;
}

.top-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 20px;
    color: #999;
}

.top-nav>li>a:hover,
.top-nav>li>a:focus,
.top-nav>.open>a,
.top-nav>.open>a:hover,
.top-nav>.open>a:focus {
    color: #fff;
    background-color: #000;
}

.top-nav>.open>.dropdown-menu {
    float: left;
    position: absolute;
    margin-top: 0;
    border: 1px solid rgba(0,0,0,.15);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.top-nav>.open>.dropdown-menu>li>a {
    white-space: normal;
}

/* Side Navigation */

@media(min-width:768px) {
    .side-nav {
        position: fixed;
        top: 51px;
        left: 225px;
        width: 225px;
        margin-left: -225px;
        border: none;
        border-radius: 0;
        overflow-y: auto;
        background-color: #222;
    }

    .side-nav>li>a {
        width: 225px;
    }

    .side-nav li a:hover,
    .side-nav li a:focus {
        outline: none;
        background-color: #000 !important;
    }
}

.side-nav>li>ul {
    padding: 0;
}

.side-nav>li>ul>li>a {
    display: block;
    padding: 10px 15px 10px 38px;
    text-decoration: none;
    color: #999;
}

.side-nav>li>ul>li>a:hover {
    color: #fff;
}
.navbar-inverse .navbar-brand {
    color: #ff4500;
    font-size: 25px;
}
.dash-head{
    font-size: 40px;
    color: #ff4703;
}
p{
    font-size: 15px;
    padding: 0;
}
.dash-list{
    list-style: none;
}
footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding:0;
  color: #fff;
  background-color: #555;
  text-align: center;
}

Answer 1

正如您所提到的，您正在使用 Bootstrap ，为了使您的表具有响应性，您应该只使用框架中可用的类。即:

<table class='table table-responsive'>
    //Rest of table here
</table>

您可以在此处找到完整的文档:http://getbootstrap.com/css/#tables