水平和垂直滚动条丢失

时间:2021-02-04 14:19:28

标签: php html css

我正在处理这个 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;
}


1 个答案:

答案 0 :(得分:0)

你错过了溢出:滚动; 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>

所以在上面的例子中,垂直滚动将作为文本从指定的高度克服,如果我减少了和文本从指定的克服然后水平滚动将起作用希望你理解上面的例子和描述