目前,对于这个项目,我正在使用bootstrap和我的个人css文件。我已经定义了页面包装类来区分菜单项和内容。 该表在广阔的视野中工作正常。 Working(desktop view)
但在移动视图中,有一半的内容显示在黑暗的背景中
代码:
页面的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;
}
答案 0 :(得分:0)
正如您所提到的,您正在使用引导程序,为了使您的表响应,您应该只使用框架中可用的类。即:
<table class='table table-responsive'>
//Rest of table here
</table>
您可以在此处找到完整的文档:http://getbootstrap.com/css/#tables
答案 1 :(得分:0)
虽然您使用过bootstrap,但您还没有做任何事情来使表格响应。
<div class="table-responsive">
<table class="table">
//Code
</table>
</div>
使用上述代码。我希望你能得到你想要的东西。