如何修复页面右侧表格列中的混乱，我有一些无法展开导航栏和表格的问题

如何解决如何修复页面右侧表格列中的混乱，我有一些无法展开导航栏和表格的问题

enter image description here enter image description here 在这里您可以在右侧看到未展开的标题和正文。如何解决这个问题....我在这里分享我的 css 和 jsp 文件 hode..它在那里混乱..我需要扩展导航栏和表格...怎么做

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,0.3);
 }
.tbl-content{
  height:300px;
  overflow-x:auto;
  margin-top: 0px;
  border: 1px solid rgba(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,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,#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.3); 
} 
::-webkit-scrollbar-thumb {
    -webkit-Box-shadow: inset 0 0 6px rgba(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;
}

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

解决方法

布局中可能发生的事情：

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

设置固定的表格布局算法。表和列的宽度是由 table 和 col 的宽度或由第一行的宽度设置细胞。其他行中的单元格不影响列宽。如果没有宽度出现在第一行，列宽等分跨表格，无论单元格内的内容如何

您的标题没有随着您的表格扩展，因为与您的表格不同，它不会溢出您的视口。由于您将部分宽度设置为 90%，它实际上意味着视口的 90%。所以你可以为你的表格设置滚动。在以下代码中，我删除了 JS 脚本。但它应该可以工作，所以这里所做的是将 overflow-y:scroll 添加到 .tbl-header（表的父/容器）和 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,0.3);
  overflow-x:scroll;
 }
.tbl-content{
  height:300px;
  overflow-x:auto;
  margin-top: 0px;
  border: 1px solid rgba(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,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,#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.3); 
} 
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(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>