问题描述
enter image description hereenter 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>