向HTML5表格中添加垂直和水平滚动条

向HTML5表格中添加垂直和水平滚动条,html,css,Html,Css,我有一个表,我想使垂直和水平滚动。当我添加一个div时,它会变成可滚动的,但是会缩小到更小的大小。我希望表格占据屏幕的可用宽度并可滚动。而不是让桌子变得凌乱,而是把它缩小到一个小尺寸 下面是没有div的表的图片 下面是该表的代码 列出mysql中的数据 ID FirstName Lastname 请求 目的 说明 预订时间 访问时间 退出时间 批准 批准人 更新 试试这个 #scroll-table { height: auto; max-height: 180px; // 18

我有一个表,我想使垂直和水平滚动。当我添加一个div时,它会变成可滚动的,但是会缩小到更小的大小。我希望表格占据屏幕的可用宽度并可滚动。而不是让桌子变得凌乱,而是把它缩小到一个小尺寸

下面是没有div的表的图片

下面是该表的代码


列出mysql中的数据
ID
FirstName
Lastname
请求
目的
说明
预订时间
访问时间
退出时间
批准
批准人
更新
试试这个

#scroll-table {
  height: auto;
  max-height: 180px; // 180px seems to work well on mobile
  overflow: scroll;
  border-radius 0px;
  -webkit-border-radius: 0px;
}
#scroll-table::-webkit-scrollbar {
 -webkit-appearance: none;
 width: 4px;        
}
#scroll-table::-webkit-scrollbar-thumb {
 border-radius: 3px;
 background-color: lightgray;
 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.75);        
}
试试这个

#scroll-table {
  height: auto;
  max-height: 180px; // 180px seems to work well on mobile
  overflow: scroll;
  border-radius 0px;
  -webkit-border-radius: 0px;
}
#scroll-table::-webkit-scrollbar {
 -webkit-appearance: none;
 width: 4px;        
}
#scroll-table::-webkit-scrollbar-thumb {
 border-radius: 3px;
 background-color: lightgray;
 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.75);        
}

指定溢出-x:滚动
;和
最小宽度
:例如95%<代码>溢出-y:自动
这里有一把小提琴

指定
overflow-x:scroll
;和
最小宽度
:例如95%<代码>溢出-y:自动
这是一把小提琴你在找这样的东西吗

表格{
边框:1px纯红;
框大小:边框框;
显示:块;
溢出:滚动;
宽度:100%;
}
th{
边框:1px纯绿色;
最小宽度:150px;
}

列出mysql中的数据
ID
FirstName
Lastname
请求
目的
说明
预订时间
访问时间
退出时间
批准
批准人
更新

你在找这样的东西吗

表格{
边框:1px纯红;
框大小:边框框;
显示:块;
溢出:滚动;
宽度:100%;
}
th{
边框:1px纯绿色;
最小宽度:150px;
}

列出mysql中的数据
ID
FirstName
Lastname
请求
目的
说明
预订时间
访问时间
退出时间
批准
批准人
更新

如果缩小到较小的尺寸,您可能需要手动调整div的宽度和高度

#scroll-table{
width: 100px;
height: 50px;
};

只需使用宽度和高度值即可。我想不出一个更简单的方法来解决这个问题

如果它缩小到一个更小的尺寸,您可能需要手动调整div的宽度和高度

#scroll-table{
width: 100px;
height: 50px;
};

只需使用宽度和高度值即可。我想不出一个更简单的方法来解决这个问题

问题在于包含表格的部分,当它减少时,会影响表格。因此下面的css代码修复了这个问题

下面是该表的加分


列出mysql中的数据
ID
FirstName
Lastname
请求
目的
说明
预订时间
访问时间
退出时间
批准
批准人
更新

问题在于包含表格的部分,当它减少时,会影响表格。因此下面的css代码修复了该问题

下面是该表的加分


列出mysql中的数据
ID
FirstName
Lastname
请求
目的
说明
预订时间
访问时间
退出时间
批准
批准人
更新