如何修复页面右侧 table 列中的失真，我遇到一些无法展开导航栏和 table 的问题

Question

enter image description hereenter image description here这里你可以看到右边的header和body没有展开。如何解决这个问题....我在这里分享我的css和jsp文件hode..它在那里混乱..我需要扩展导航栏并且table......如何做

h1{
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}
table{
  width:100%;
  table-layout: fixed;
}
.tbl-header{
  background-color: rgba(255,255,255,0.3);
 }
.tbl-content{
  height:300px;
  overflow-x:auto;
  margin-top: 0px;
  border: 1px solid rgba(255,255,255,0.3);
}
th{
  padding: 20px 30px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}
td{
  padding: 20px 20px;
  text-align: left;
  vertical-align:middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255,255,255,0.1);
}


/* demo styles */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
  background: -webkit-linear-gradient(left, #25c481, #25b7c4);
  background: linear-gradient(to right, #25c481, #25b7c4);
  font-family: 'Roboto', sans-serif;
}
section{
  margin: 50px;
}


/* follow me template */
.made-with-love {
  margin-top: 40px;
  padding: 10px;
  clear: left;
  text-align: center;
  font-size: 10px;
  font-family: arial;
  color: #fff;
}
.made-with-love i {
  font-style: normal;
  color: #F50057;
  font-size: 14px;
  position: relative;
  top: 2px;
}
.made-with-love a {
  color: #fff;
  text-decoration: none;
}
.made-with-love a:hover {
  text-decoration: underline;
}


/* for custom scrollbar for webkit browser*/

::-webkit-scrollbar {
    width: 6px;
} 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}

<!-- Jsp page  -->


<%@page import="java.sql.ResultSet"%>
<%@page import="dao.BookingDao"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<%@include file="AdminHeader.jsp"%>
<link rel="stylesheet" type="text/css" href="css/showdata.css">
<title>Booking Details</title>
</head>
<body>

<%
  if(session.getAttribute("username")==null){
      response.sendRedirect("login.jsp");
  }
%>
<div class="tbl-header">
<table cellpadding="20" cellspacing="0" border="0">

<tr>
<td>Booking ID</td>
<td>Username</td>
<td>Package ID</td>
<td>Package Name</td>
<td>Place1</td>
<td>Place2</td>
<td>Place3</td>
<td>Hotel1</td>
<td>Hotel2</td>
<td>Hotel3</td>
<td>Days</td>
<td>Package Cost</td>
<td>Date</td>
<td>Booking Date</td>
<td>Persons</td>
<td>Room Type</td>

<td>Total Cost</td>
<td>Payment Status</td>
</tr>
<%
BookingDao adao=new BookingDao();
ResultSet rs= adao.getDataadmin();
while(rs.next())
{
String bookingid=rs.getString(1);
String packageid=rs.getString(2);
String packagenm=rs.getString(3);
String place1=rs.getString(4);
String place2=rs.getString(5);
String place3=rs.getString(6);
String hotelnm1=rs.getString(7);
String hotelnm2=rs.getString(8);
String hotelnm3=rs.getString(9);
String days=rs.getString(10);
int packagecost=rs.getInt(11);
String date=rs.getString(12);
String bdate=rs.getString(13);
int person=rs.getInt(14);
String room=rs.getString(15);
String username=rs.getString(16);
double total=rs.getDouble(22);

%>
<tr>
<td><%=bookingid%></td>
<td><%=username %></td>
<td><%=packageid %></td>
<td><%=packagenm %></td>
<td><%=place1%></td>
<td><%=place2%></td>
<td><%=place3%></td>
<td><%=hotelnm1 %></td>
<td><%=hotelnm2 %></td>
<td><%=hotelnm3 %></td>
<td><%=days %></td>
<td><%=packagecost %></td>
<td><%=date %></td>
<td><%=bdate %></td>
<td><%=person %></td>
<td><%=room %></td>
<td><%=total %></td>
<td>Done</td>

</tr>
<%
}
%>

</table>
 </div>
</body>
</html>

body{
    background-image: url("b.jpg"); 
     background-repeat: no-repeat;
    background-attachment: fixed;
    
}
/* html { 
  background-image: url(b.jpg) no-repeat center center fixed; 
} */
#header{
    background-color:#6484b7;
    margin-top:0px;
    top:0px;
    padding-top:10px;
}

.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
.navbar-default .navbar-nav > li > a:hover {
    background-color: #6484b7;
    color:#ffffff;
}
.top-nav ul li  {
                    float : right;
                    padding:10px;
                    padding-bottom:25px;
                    list-style : none;
                    background-color:#6484b7;
                    border-radius:5px;
                    padding-top:15px;
                    font-size:18px;
                    
                }
#title{
    font-family: AR BERKLEY;
    color:#ffffff;
}
.top-nav ul li a{
    color:#ffffff;
    font-weight: bold;
    
    
}
#footer {
                    padding-top:5px;
                    padding-bottom:5px;
                    clear : both;
                    text-align: center;
                    color:white;
                    background-color:#6484b7;
                    margin-top:200px;
}
.panel-default{
    background-color: #F8F8F8;
    border-color: #F8F8F8;
    
}
#sec{
    width:90%;
    height:700px;
    background-color:white;
    margin-bottom:-180px;
    margin-left:5%;
}
#matter{
    padding-left:50px;
    padding-right:50px;
    padding-top:10px;
    font-size:18px;
    text-align: justify;
}
.top-nav ul li input[type=submit] {
    border: none;
    outline: none;
    height: 25px;
    background: #ff6340;
    color: #fff;
    font-size: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: .3s ease-out;
}

所以请告诉我如何解决这些问题...

Answer 1

您的布局中可能发生的事情：

你设置了table-layout: fixed;。所以汽车可能是更好的选择。这可能是导致您的 table 内容重叠的原因，因为 table 列大小由第一行决定。

Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells

您的页眉未随 table 扩展，因为与您的 table 不同，它不会溢出您的视口。由于您将截面宽度设置为 90%，因此它实际上意味着 90% 的视口。所以你可以为你的 table 设置滚动条。在下面的代码中，我删除了 JS 脚本。但它应该有效，所以这里所做的是将 overflow-y:scroll 添加到 .tbl-header（parent/container of table）和 table-layout:auto;.

h1{
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}
table{
  width:100%;
  table-layout: auto;
  
}
.tbl-header{
  background-color: rgba(255,255,255,0.3);
  overflow-x:scroll;
 }
.tbl-content{
  height:300px;
  overflow-x:auto;
  margin-top: 0px;
  border: 1px solid rgba(255,255,255,0.3);
}
th{
  padding: 20px 30px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}
td{
  padding: 20px 20px;
  text-align: left;
  vertical-align:middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255,255,255,0.1);
}


/* demo styles */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
  background: -webkit-linear-gradient(left, #25c481, #25b7c4);
  background: linear-gradient(to right, #25c481, #25b7c4);
  font-family: 'Roboto', sans-serif;
}
section{
  margin: 50px;
}


/* follow me template */
.made-with-love {
  margin-top: 40px;
  padding: 10px;
  clear: left;
  text-align: center;
  font-size: 10px;
  font-family: arial;
  color: #fff;
}
.made-with-love i {
  font-style: normal;
  color: #F50057;
  font-size: 14px;
  position: relative;
  top: 2px;
}
.made-with-love a {
  color: #fff;
  text-decoration: none;
}
.made-with-love a:hover {
  text-decoration: underline;
}


/* for custom scrollbar for webkit browser*/

::-webkit-scrollbar {
    width: 6px;
} 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}

<html>
<head>
<title>Booking Details</title>
</head>
<body>

<div class="tbl-header">
<table cellpadding="20" cellspacing="0" border="0">

<tr>
<td>Booking ID</td>
<td>Username</td>
<td>Package ID</td>
<td>Package Name</td>
<td>Place1</td>
<td>Place2</td>
<td>Place3</td>
<td>Hotel1</td>
<td>Hotel2</td>
<td>Hotel3</td>
<td>Days</td>
<td>Package Cost</td>
<td>Date</td>
<td>Booking Date</td>
<td>Persons</td>
<td>Room Type</td>

<td>Total Cost</td>
<td>Payment Status</td>
</tr>

<tr>
<td><%=bookingid%></td>
<td><%=username %></td>
<td><%=packageid %></td>
<td><%=packagenm %></td>
<td><%=place1%></td>
<td><%=place2%></td>
<td><%=place3%></td>
<td><%=hotelnm1 %></td>
<td><%=hotelnm2 %></td>
<td><%=hotelnm3 %></td>
<td><%=days %></td>
<td><%=packagecost %></td>
<td><%=date %></td>
<td><%=bdate %></td>
<td><%=person %></td>
<td><%=room %></td>
<td><%=total %></td>
<td>Done</td>

</tr>

</table>
 </div>
</body>
</html>

如何修复页面右侧 table 列中的失真，我遇到一些无法展开导航栏和 table 的问题

How to fix the disortion in table columns in the right side of the page , i have some problem with that can't expand navbar and table

html

css

java

jsp

css-tables