Как исправить искажение в столбцах таблицы в правой части страницы , у меня есть некоторые проблемы с тем, что я не могу развернуть панель навигации и таблицу

ProgramBox

Как исправить искажение в столбцах таблицы в правой части страницы , у меня есть некоторые проблемы с тем, что я не могу развернуть панель навигации и таблицу

Post author:admin
Запись опубликована:17 января, 2022
Post category:Вопросы по программированию

#java #html #css #jsp #css-tables

Вопрос:

введите описание изображения здесь введите описание изображения здесь здесь вы можете увидеть справа заголовок и тело, не развернутые. как это исправить…. я делюсь своим css и jsp-файлом here..it искажено там..мне нужно развернуть навигационную панель, а также таблицу там… как это сделать

 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>

<! css заголовка для навигационной панели>

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

поэтому, пожалуйста, скажите мне, как решить эту проблему…

Ответ №1:

Вещи, которые могут быть в вашем макете:

Ты готова table-layout: fixed; . Так что авто может быть лучшим выбором. Это может быть причиной того, что содержимое вашей таблицы перекрывается, поскольку размер столбца таблицы определяется первой строкой.

Задает фиксированный алгоритм компоновки таблицы. Ширина таблицы и столбца определяется шириной таблицы и столбца или шириной первой строки ячеек. Ячейки в других строках не влияют на ширину столбцов. Если в первой строке нет ширины, ширина столбцов делится поровну по всей таблице, независимо от содержимого внутри ячеек

Ваш заголовок не расширяется вместе с вашей таблицей, потому что, в отличие от вашей таблицы, он не переполняет ваше окно просмотра. Поскольку вы установили ширину раздела на 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,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>

1. @beingcoder добавляет переполнение-y: прокрутка; (даже переполнение: прокрутка; также будет работать) в class= tbl-заголовок ( который является родительским разделом таблицы)

Метки: Как исправить искажение в столбцах таблицы в правой части страницы, у меня есть некоторые проблемы с тем, что я не могу развернуть панель навигации и таблицу

Вопрос:

Ответ №1:

Комментарии:

Вам также может понравиться

Выполнение вложенного запроса с использованием значений из основного запроса в postgres

Как легко преобразовать загрузчик данных PyTorch в tf.Dataset?

DialogPreference — ошибка