向Table添加横向滚动条

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>给table新增水平滚动条</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gbk-123">

<style type="text/css" mce_bogus="1">
table th{
white-space: nowrap;
}
table td{
white-space: nowrap;
}
body,table{
font-size:12px;
}
table{
empty-cells:show;
border-collapse: collapse;
margin:0 auto;
}

h1,h2,h3{
font-size:12px;
margin:0;
padding:0;
}
table.tab_css_1{
border:1px solid #cad9ea;
color:#666;
}
table.tab_css_1 th {
background-image: url("th_bg1.gif");
background-repeat:repeat-x;
height:30px;
}
table.tab_css_1 td,table.tab_css_1 th{
border:1px solid #cad9ea;
padding:0 1em 0;
}
table.tab_css_1 tr.tr_css{
background-color:#f5fafe;
height:30px;
}
</style>
</head>
<body>
<div style="overflow: auto; width: 100%;">
<table border="1" class="tab_css_1">
<thead>
<th>序号</th>
<th>地市</th>
<th>区县</th>
<th>门店名称</th>
<th>对应直供客户名称</th>
<th>虚拟账号</th>
<th>门店负责人</th>
<th>联系方式</th>
<th>面积</th>
<th>店面属性</th>
<th>营业人数</th>
<th>月销量</th>
<th>月开卡量</th>
<th>对应渠道督导</th>
<th>是否有营业执照</th>
</thead>
<tr class="tr_css" align="center">
<td>1</td>
<td>泉州</td>
<td>南安</td>
<td>系统公司</td>
<td>终端门店</td>
<td>林计钦</td>
<td>qz1891234567</td>
<td>1891234567</td>
<td>20</td>
<td>直营店</td>
<td>5</td>
<td>50</td>
<td>40</td>
<td>张三</td>
<td>是</td>
</tr>
<tr class="tr_css" align="center">
<td>2</td>
<td>泉州</td>
<td>安溪</td>
<td>安溪铁观音集团</td>
<td>御品仙茶业</td>
<td>林计钦</td>
<td>qz1891234567</td>
<td>1891234567</td>
<td>20</td>
<td>直营店</td>
<td>5</td>
<td>50</td>
<td>40</td>
<td>张三</td>
<td>是</td>
</tr>
</table>
</div>
</body>
</html>

时间: 2024-10-10 11:32:18

向Table添加横向滚动条的相关文章

ext grid添加横向滚动条

Ext.override(Ext.grid.GridView, {                  renderBody : function() {                      var markup = this.renderRows();                      if (markup == "")                          markup = "<div style='width:" + this.g

VB ListBox 添加横向滚动条

Private Declare Function SendMessage Lib "user32 " Alias "SendMessageA" (ByVal hwnd As Long, _ ByVal wMsg As Long, _ ByVal wParam As Long, _ lParam As Any) As Long Private Const LB_SETHORIZONTALEXTENT = &H194-----------------------

table添加水平滚动条

<html> <head> <title>table新增水平滚动条</title> <style type="text/css"> .tableWrap { overflow: auto; } table{ width: 100% } table th{ white-space: nowrap; } table td{ white-space: nowrap; } </style> </head> &l

table左边固定-底部横向滚动条

是日有需求,曾探讨过table表单头部.尾部固定不动,中间内容随着滚动条的滚动而变化. 整合资料之际,发现有很多表格,表单展现中,横向数据很多.很长,不方便查看. 则,横空霹雳出了,此款:table表单左边固定,底部滚动条左右滑动展现数据demo. 原理很简单:在 table外面嵌套一层div ,并且设置此父div {overflow: auto;}.此举为了出席横向滚动条 对里面的tr设置{position: relative;}相对定位 对tr里面的第一个td设置fixed .fixed {

移动端禁用横向滚动条

在用bootstrap制作移动开发的时候,发现宽度并未超过屏幕宽度时,依然出现横向滚动条. 问题解决: 1.查看是否在head里面加入 /*等比例缩放*/<meta name="viewport" content="width=device-width, initial-scale=1.0">/*禁止缩放*/<meta name="viewport" content="initial-scale=1, maximum-

IE6下出现横向滚动条问题的解决方案

当我们在css样式设置为html {overflow-y:auto;}时,在ie7以上版本应用时不会有问题,可是在ie6下就会发现垂直滚动条出现会引起横向滚动条出现.究其原因是在ie6下,当内容过多出现垂直滚动条时,此时页面的宽度为其本来宽度加上滚动条的宽度,导致页面宽度超过100%,而出现横向滚动条,在ie7+浏览器中,会自动的识别滚动条,页面宽度为内容的宽度加上滚动条的宽度等于100%,而不会出现滚动条,这相当于是ie的滚动条bug(纯属个人见解,不对的地方还请指出,共同学习交流). 解决上

WPF,解决Listbox,按住ListboxItem向下拖出Listbox,横向滚动条跑到最后。

类似这种样式的控件,.,在横向滚动条隐藏的情况下有这样的问题.(横向滚动条显示的时候也会,,目前不知道怎么解决.) 因为这个控件偏移是利用ListBox的ItemsPanelTemplate模版里的StackPanel的宽度通过设置"(UIElement.RenderTransform).(TranslateTransform.X)"来偏移到指定位置. 所以的横向滚动条必须在最前面不能动,不然便宜位置会出错. 如图按住4,按住鼠标向下移动出ListBox,滚动条会自动跑到最后. 解决方

1.横向滚动条,要设置两个div包裹. 2. 点击切换视频或者图片. overflow . overflow-x

1.横向滚动条. div.1 > div.2 > img img  img 第一: 设置 div.1 一个固定的宽度 和高度  . 例如宽度 700px;  高度是 120px; 设置 overflow-x 第二; 每个图片的 宽度是 150px, 高度 100px( 比 div.1 小, 要可以显示横向滚动条 第三: 重点 . 设置 div.2 的宽度 .  如果有 10个图片, 每个图片margin-right 为 10px,   那么 div.2 的宽度就是  (150+10)*10 这

extjs 横向滚动条 和 本地排序

横向滚动条: 如果想要在页面中固定每一列的宽度 并出现横向滚动条, 则在grid的viewConfig 中设置forceFit : false, 在grid的每一列设置一个width. 如果想要在列表中固定某一列的宽度 ,其他的宽度自适应,则需要设置grid中viewConfig的forceFit : true,在需要设列宽的地方加上width  并添加 falfixed:true. 如果全部自适应,则在grid中的viewConfig设置forceFit: true即可 不需要设置列宽. 本地