簡體   English   中英

缺少水平和垂直滾動條

[英]Horizontal and Vertical Scrollbars missing

我正在處理這個 html/php 頁面的代碼,突然間我的滾動條不見了。
我需要它們,因為頁面必須在表格中顯示查詢結果並且有很多列。
. 我想知道錯誤是否可能在 css 文件中。 這是代碼:

我想我已經把每個設計修改都放在了 css 文件中,所以應該是這里的問題。

label {
    display: block;
    margin: 5px 0;
}

header {
    padding-top: 100px;
    padding-bottom: 100px;
    height: 50px;
    text-align: center;;
}

my_table {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

my_table td, my_table th {
              border: 1px solid #ddd;
              padding: 8px;
}

my_table tr:nth-child(even){
    background-color: #CC0000;
}

my_table tr:hover {
    background-color: #ddd;
}

my_table th {
              padding-top: 12px;
              padding-bottom: 12px;
              text-align: left;
              background-color: #CC0000;
              color: white;
}

body,h1,h2,h3,h4,h5 {
    font-family: "Raleway", sans-serif;
    overflow: auto;
}

.container {
  height: 300px;
  position: relative;
}

.container2 {
  height: 1400px;
  position: relative;
}

.container3 {
  height: 130px;
  position: relative;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

button {
  display:block;
  width: 120px;
  height: 60px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font color: black;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: white; 
  color: black; 
  border: 2px solid #CC0000;
}

a {
    text-decoration:none;
    display: block;
}

button:hover {
  background-color: #CC0000 ;
  color: white;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

header-img {
  width: 100%;
  height: 400px;
  background: url('C:\xampp\htdocs\pdo\public\templates\LGP_logo_18.jpg');
  background-size: cover;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 5px;
    border-bottom: 1px solid #aaa;
}


你錯過了溢出:滾動; css 屬性,它將適用於特定的寬度和高度

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 100%;
height: 100px;
border: 1px dotted black;
overflow: scroll;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>Setting the overflow value to scroll, the overflow is clipped and a scrollbar is 
added to scroll inside the box. Note that this will add a scrollbar both horizontally 
and vertically (even if you do not need it):</p>

<div>You can use the overflow property when you want to have better control of the 
layout. The overflow property specifies what happens if content overflows an element's 
box. You can use the overflow property when you want to have better control of the 
layout. The overflow property specifies what happens if content overflows an element's 
box. You can use the overflow property when you want to have better control of the 
layout. The overflow property specifies what happens if content overflows an element's 
box. You can use the overflow property when you want to have better control of the 
layout. The 
overflow property specifies what happens if content overflows an element's box.
You can use the overflow property when you want to have better control of the layout. 
overflow property specifies what happens if content overflows an element's box.
You can use the overflow property when you want to have better control of the layout. 
overflow property specifies what happens if content overflows an element's box.
You can use the overflow property when you want to have better control of the layout. 
The overflow property specifies what happens if content overflows an element's box. 
</div>

</body>
</html>

所以在上面的例子中,垂直滾動將作為文本從指定高度克服,如果我減少 with 和從指定 with 克服的文本,那么水平滾動將起作用希望你理解上面的例子和描述

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM