0
点赞
收藏
分享

微信扫一扫

html tbale 中对tr td 做的一下操作总结 table样式 和几个例子 thead不动，tbody 滚动 和滚动条

王栩的文字 2022-08-02 阅读 26
html数据宽高Linux系统/运维


思路

先介绍个思路

  • 平常开发中可以在设置table 样式的时候总是不方便，
  • 在这里通过border="0" cellpadding="0" cellspacing="0"
  • 这三个参数 对table 做了下 单元格无缝隙操作
  • 然后做各种样式在td th  或td th 内部的div中做样式 边框啥的就不会出现缝隙，也就可以做到一些想要的效果了
  • 比如做个tr 上下边框样式就用td th 或内部的div 做出效果

例子

 <table   border="0" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th><div class="s1">表名称</div></th>
                    <th><div class="s2">  标签</div></th>
                    <th><div class="s3">所属系统</div></th>
                    <th><div class="s4" style="text-align:center;">操作</div></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

 

第二个总结的 滚动条

 

开发中会遇到tbody 进行滚动 thead 不滚动的场景

  • 一般情况设置了 display:block 就会出现如下情况 表格的td th  不会自动伸长

 
  body {padding: 100px 0 0 100px;}
  table {width: 500px;text-align:center;
  }

  table thead {
    width: 500px;
    display:block;
  }
  table tbody {
    width: 500px;
    height: 100px;
    display:block;
    overflow: auto;
  }
  table tbody tr td {
    border-bottom:1px solid #000; 
  }
  table thead tr th {
    border-bottom:1px solid #000; 
  }
  
</style>
<body>
  <table border="0" cellpadding="0" cellspacing="0"> 
      <thead>
        <tr><th>s1</th><th>s2</th><th>s3</th></tr>
       </thead>
      <tbody>
         <tr><td>s</td><td>s</td><td>s</td></tr>
         <tr><td>s</td><td>s</td><td>s</td></tr>
         <tr><td>s</td><td>s</td><td>s</td></tr> 
       </tbody>
  </table>
</body>

html tbale 中对tr td 做的一下操作总结 table样式 和几个例子 thead不动，tbody 滚动 和滚动条_宽高

这个时候就要对td th设置宽度才可以

table tbody tr td {
    border-bottom:1px solid #000;
    width:100px;
  }
  table thead tr th {
    border-bottom:1px solid #000;
    width:100px;
  }

  • 就会出现如下

html tbale 中对tr td 做的一下操作总结 table样式 和几个例子 thead不动，tbody 滚动 和滚动条_宽高_02

然后用js 计算一下宽度即可

 

 

列出一个滚动条的样式

 ::-webkit-scrollbar {
            width: 10px; /*对垂直流动条有效*/
            height: 10px; /*对水平流动条有效*/
        }
        /*定义滚动条的轨道颜色、内阴影及圆角*/
        ::-webkit-scrollbar-track{
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: rosybrown;
            border-radius: 3px;
        }
       /*定义滑块颜色、内阴影及圆角*/
        ::-webkit-scrollbar-thumb{
            border-radius: 7px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #E8E8E8;
        }
        /*定义两端按钮的样式*/
        ::-webkit-scrollbar-button { background-color:#E8E8E8;}
        /*定义右下角汇合处的样式*/
       ::-webkit-scrollbar-corner { background:khaki;}

  • 就是如下的滚动条

  • html tbale 中对tr td 做的一下操作总结 table样式 和几个例子 thead不动，tbody 滚动 和滚动条_宽高_03

 

js 自动添加数据实现

页面代码
<table border="0" cellpadding="0" cellspacing="0"> 
      <thead></thead>
      <tbody></tbody>
  </table>


js code




//数据替换成自己需要用的数据
  var data = [{ "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }]

  //直接把表头和表内全部载入
  var addTableF = function (features) {
    var hthead = "";
    var htbody = "";

    hthead += '<tr>';//编写表头
    for (var j in features[0]) {
      hthead += '<th><div>' + j + '</div></th>';
    }
    hthead += '</tr>';

    for (i = 0, len = features.length; i < len; i++) {//编写表格
      htbody += '<tr>';
      for (var j in features[i]) {
        htbody += '<td><div>' + features[i][j] + '</div></td>';
      }
      htbody += '</tr>';
    }
    $("table thead").empty().html(hthead);
    $("table tbody").empty().html(htbody);
  }
  addTableF(data);

  • 数据量小的时候，不添加滚动条不加display:block 属性，会自动伸长到自适应宽度
  • 适用于小数据量情况，或分页情况

 

如下 设置一下table 的宽即可

html tbale 中对tr td 做的一下操作总结 table样式 和几个例子 thead不动，tbody 滚动 和滚动条_数据_04

 

计算宽度

  • 给每个td 中的div 设定宽度 每个加一个唯一的class
  • 通总宽度除以表格横向数量得到平均值
  • 然后如果有的宽有的窄，可以按照平均值*0.6 另一个*1.4实现

 $(".s1").css("width",(glb.glbwidth-100)/4*0.6+"px");
        $(".s2").css("width",(glb.glbwidth-100)/4*1.6+"px");
        $(".s3").css("width",(glb.glbwidth-100)/4*0.8+"px");

 

 

做一个实例，一个最简单的tbody 加滚动条

<html>
<head>
  <title>New Document</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>

  body {padding: 100px 0 0 100px;}
  
  table {text-align:center;}

  table thead {/* 宽高*/
    width: 600px;
    display:block;
  }
  table tbody {/* 宽高 */
    width: 600px;
    height: 100px;
    display:block;
    overflow: auto;
  }
  table tbody tr td {/* 添加样式 */
    border-bottom:1px solid #000;
    width:200px;
  }
  table thead tr th {/* 添加样式 */
    border-bottom:1px solid #000;
    width:200px;
  }
  
</style>
<body>
  <!-- 表格去除空隙 -->
  <table border="0" cellpadding="0" cellspacing="0"> 
      <thead>
        <tr><th>s1</th><th>s2</th><th>s3</th></tr>
       </thead>
      <tbody>
         <tr><td>s</td><td>s</td><td>s</td></tr>
         <tr><td>s</td><td>s</td><td>s</td></tr>
         <tr><td>s</td><td>s</td><td>s</td></tr>
         <tr><td>s</td><td>s</td><td>s</td></tr>
         <tr><td>s</td><td>s</td><td>s</td></tr>
         <tr><td>s</td><td>s</td><td>s</td></tr>
         <tr><td>s</td><td>s</td><td>s</td></tr>
         <tr><td>s</td><td>s</td><td>s</td></tr>
         <tr><td>s</td><td>s</td><td>s</td></tr>
       </tbody>
  </table>
</body>  
</html>

  • 这里这些是需要必须有的样式设置
  • 效果如下

html tbale 中对tr td 做的一下操作总结 table样式 和几个例子 thead不动，tbody 滚动 和滚动条_html_05

 

 

一个js写入代码 的最简单例子

<html>

<head>
  <title>New Document</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>

  body {padding: 100px 0 0 100px;}
  
  table {text-align:center;}

  table thead {/* 宽高*/
    width: 600px;
    display:block;
  }
  table tbody {/* 宽高 */
    width: 600px;
    height: 100px;
    display:block;
    overflow: auto;
  }
  table tbody tr td {/* 添加样式 */
    border-bottom:1px solid #000;
    width:200px;
  }
  table thead tr th {/* 添加样式 */
    border-bottom:1px solid #000;
    width:200px;
  }
  
</style>
<body>
  <!-- 表格去除空隙 -->
  <table border="0" cellpadding="0" cellspacing="0"> 
      <thead></thead>
      <tbody></tbody>
  </table>
</body>  
<script>


//数据替换成自己需要用的数据
var data = [{ "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }]

//直接把表头和表内全部载入
var addTableF = function (features) {
  var hthead = "";
  var htbody = "";

  hthead += '<tr>';//编写表头
  for (var j in features[0]) {
    hthead += '<th><div>' + j + '</div></th>';
  }
  hthead += '</tr>';

  for (i = 0, len = features.length; i < len; i++) {//编写表格
    htbody += '<tr>';
    for (var j in features[i]) {
      htbody += '<td><div>' + features[i][j] + '</div></td>';
    }
    htbody += '</tr>';
  }
  $("table thead").empty().html(hthead);
  $("table tbody").empty().html(htbody);
}
addTableF(data);
</script>
</html>

  • 数据只要按照上边的来就可以出现
  • [{},{}]
  • 效果

html tbale 中对tr td 做的一下操作总结 table样式 和几个例子 thead不动，tbody 滚动 和滚动条_html_06

 

总结这几个例子调用时候注意的地方


html tbale 中对tr td 做的一下操作总结 table样式 和几个例子 thead不动，tbody 滚动 和滚动条_html_07

  • 1.样式 需要必要性 
  • thead 宽
  • tbody 宽高 overflow,display:block
  • tr td border ,width
  • tr th border,width
  • 写了上边的这个就可以实现一个好看点的table 并body 滚动thead 不动
  • ok

 

ok

 

 

持续更新

 

 

 

 

举报

相关推荐

ElementUI中修改el-table的滚动条样式

elementui前端javascript

java中向JTextArea中添加滚动条(垂直的和水平的)

htmljavascriptjavaJava编程语言

element-ui Table 表格自定义滚动条和fixed时表格错位的解决方案

cssvue.jselementui

LigerUi是否显示滚动条和下一页的切换方式 ！（还跟导出excel有关）

导出excelajaxJava编程语言

Firefox滚动条在Win10和Win11下表现不一致问题？

c++平面算法

04jQuery之元素的显示及隐藏和元素淡入淡出、改变元素的高度、滚动条的操作

ide淡入淡出css编程语言

第92课作业，通过SerDes的方式对一下数据进行Hive的存储和查询操作

hiveapachehadoopJavaScript前端开发

新年第一问，请解释一下extend和super泛型中list操作的区别？

父类子类向上转型编程语言

Nginx 中的反向代理和负载均衡不是完全相同的概念，但它们经常一起使用，并且在某些场景下可能看起来很相似。总结了一下他们的区别

反向代理负载均衡后端服务运维
0 条评论