Skip to content
Advertisement

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

enter image description hereenter image description herehere you can see on right side the header and body not expanded. how to fix thiss…. i share my css and jsp file hode here..it disorted there..i need to expand navbar and also table there… how to do

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>

<! header css for navbar>

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;
}

so please tell me how fix those issue…

Advertisement

Answer

Things which may be going in your layout:

  1. You set table-layout: fixed;. So auto may be better choice. It may be reason leading to your table content getting overlapped because table column size is determined by first row.

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

  1. Your header is not expanding with your table because unlike your table its not overflowing your viewport. Since you set section width to 90% it actually means 90% of viewport. so you can set scroll for your table. In following code I removed JS script. But it should work, so what did here is add overflow-y:scroll to .tbl-header (parent/container of table) and 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>
User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement