1. 给table加边框

table{

 border-collapse: collapse;

/*表格的边框合并为一个单一的边框*/

}

table, table tr th,  table tr td {

border:1px solid #ccc;

}

还有种傻傻的方法：

table{

  border-top:1px solid #ccc;

  border-left:1px solid #ccc;

}

table tr td, table tr th{

  border-right:1px solid #ccc;

  border-bottom: 1px solid #ccc;

}

2.给table的th固定宽度

① 设置table的宽度

② table设置table-layout : fixed ;

③  设置th宽度

 3.给table加滚动条

在table外包一层div，div设置overflow属性

div{

   overflow-x: scroll;

}

 4.给td加滚动条

在td里加一层div，div宽度100%，且设置overflow属性

5.td里嵌套table，且table有滚动条

　① 最外层的table加上宽度、table-layout:fixed;word-break:break-all;（防止内层的table内容过长，将外层td撑开）

②在td和第二层table之间，加一层div;div设置overflow属性，再给内层table的th设置宽度就行了，

6.隐藏滚动条

.classname :: -webkit-scrollbar{

display:none;

}

7.如下图，th在左侧，右侧td，第一行的td设置了colspan=“8”，使用了colspan后，设置列宽(th/td的宽度)不生效：

解决办法：添加colgroup属性，col设置列的宽度。（若td设置了colspan,且colgroup设置了col的宽度，但ie下宽度仍不生效，记得：table加上样式table-layout : fixed ;）

<colgroup>

    <col width = '20%'>

    <col width = '10%'>

    <col width = '10%'>

    <col width = '10%'>

    <col width = '10%'>

    <col width = '10%'>

    <col width = '10%'>

    <col width = '10%'>

    <col width = '10%'>

</colgroup>

8. 设置td的内容超出部分以省略号显示（title属性展示完整数据）

table tr td {

    overflow: hidden;

    text-overflow:ellipsis;

    white-space: nowrap;

}

（若不生效，给 table 设置宽度和table-layout : fixed ;）

超出两行，再以省略号显示（不兼容ie）：
table table td{

      overflow:hidden;

      text-overflow: ellipsis;

      display:-webkit-box;

      -webkit-line-clamp:;

      -webkit-box-orient:vertical;

      word-wrap:break-word;

      word-break:break-all;

}

 9. 兼容问题：ie9下，表格出现空格以及错位。

　 如图：第一行的操作人右移了，出现了空格。

   

解决办法： 网上查，这是ie9的一个bug， </td>与<td>间有空行时会发生错位。所以，去除掉td标签内的空格。

10. tr之间出现空白行

　  如图：我在用字符串拼接，生成表结构的时候，发现渲染出的表结构tr之间有空行

　　var html ='<tr><th>名称</th><td>内容</td><th>名称</th><td>内容</td></tr>';

　　$('tbody').append(html);

　　

　　检查发现：坑啊，结束标志写错了，</tr>写错成了<tr/>，记录下来，不知道有没有人和我一起犯蠢。

11. td 在ie浏览器里 没有边框，谷歌浏览器正常

　　检查发现，td设置了相对定位position:relative,在ie下有兼容问题，

解决：设置background-clip属性（规定背景的绘制区域）     ----->      

table tr td {

  padding: 0px;

  height: 40px;

  position: relative;

  background-clip: padding-box;

}

 12. 多行多列的表头thead固定

效果图：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>多行多列的表头固定</title>

  <style>

    #app{

      max-width: 400px;

      margin: 20px auto;

      overflow: hidden;

    }

    .head-list{

      overflow: hidden; /*隐藏thead多余内容和滚动条*/

    }

    .body-list{

      overflow: auto;

      max-height: 100px;

      min-height: 0%; /* 设置了overflow：auto，在ie9可能会有兼容问题：在td里的input输入内容时，div的高度会增大 */

    }

    .head-list table{

      border-bottom: 0 none;

    }

    table{

      border: 1px solid #e7e7e7;

      border-collapse: collapse;

      table-layout: fixed;

      font-size: 12px;

      color: #666;

      width: 700px;

    }

    thead tr {

      background-color: #f2f2f2;

      height: 45px;

    }

    thead .secondTr th{

      width: 100px; /* 7*100 大于总宽度400 */

      border-bottom: 0 none;

    }

    th,td{

      border: 1px solid #e7e7e7;

      text-align: center;

      box-sizing: border-box;

    }

    table tbody tr td {

      width: 100px;

      padding: 15px 0px;

    }

  </style>

</head>

<body>

  <div id="app">

    <div class="head-list">

      <table>

        <thead>

          <tr>

            <th colspan="2">水果</th>

            <th colspan="3">人名</th>

            <th colspan="2">玩具</th>

          </tr>

          <tr class="secondTr">

            <th>苹果</th>

            <th>香蕉</th>

            <th>Jay</th>

            <th>Lucy</th>

            <th>Nick</th>

            <th>小汽车</th>

            <th>娃娃</th>

          </tr>

        </thead>

      </table>

    </div>

    <div class="body-list">

      <table>

        <tr>

          <td>2个</td>

          <td>2个</td>

          <td>2个</td>

          <td>2个</td>

          <td>2个</td>

          <td>2个</td>

          <td>2个</td>

        </tr>

        <tr>

          <td>3个</td>

          <td>3个</td>

          <td>3个</td>

          <td>3个</td>

          <td>3个</td>

          <td>3个</td>

          <td>3个</td>

        </tr>

        <tr>

          <td>4个</td>

          <td>4个</td>

          <td>4个</td>

          <td>4个</td>

          <td>4个</td>

          <td>4个</td>

          <td>4个</td>

        </tr>

        <tr>

          <td>5个</td>

          <td>5个</td>

          <td>5个</td>

          <td>5个</td>

          <td>5个</td>

          <td>5个</td>

          <td>5个</td>

        </tr>

      </table>

    </div>

  </div>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

  <script>

    // 不加js的情况下，此时页面tbody已经出现横纵滚动条，但在滚动横向滚动条时，表头不动（见图1）。所以要设置一个scroll事件，让表头随着表体滚动

    $('.body-list').on('scroll', function () {

      $(".head-list").scrollLeft($('.body-list').scrollLeft());

    });

    var divHeight = $(".body-list").height();

    var tableHeight = $(".body-list table").height();

    // 出现纵向滚动条时，给表头div添加margin样式(略丑，但是不加margin，会导致横向条滚到最右，上下表格发生错位，见图2)

    if(tableHeight > divHeight){

      $(".head-list").css('margin-right','17px');

    }

  </script>

</body>

</html>

图1：

图2：

table的td、th的一些样式问题（宽度，边框，滚动条）的更多相关文章

  1. ie7、ie8 下Table 中 td 列固定宽度 未按样式设定显示 曲线解决方案

    <!doctype html> <html> <head> <meta charset='utf-8'> <style> .title {b ...

  2. 当Table中td内容为空时，显示边框的办法

    1. 在 table的css里面加: border-collapse:collapse;在 td 的css里面加: empty-cells:show; 2 .最简单的就是 在TD里写个    说明: ...

  3. 如何让table中td宽度固定

    table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td . ...

  4. table中td内容过长 省略号显示

    首先设置 css样式: table { table-layout: fixed;} HTML中的table代码: <tr> <th class="col-md-1" ...

  5. table中td的宽度不随文字变宽

    1.设置了table的宽度后,宽度仍然不固定,td的内容一多,很容易吧table撑变形.有些时候我们需要设置固定的宽度. 解决办法 table的css 加入样式  table-layout:fixed ...

  6. 关于table的td和ul元素li隔行变色的功能实现

    table元素的td和ul元素li隔行变色的功能实现 利用css控制二者的样式轻松实现隔行换色: 例如:table的css样式控制: table tr td{   background-color:颜 ...

  7. table的td的1%

    使用media-obj和media-bd类似的样式,大多数采用的是display: table-cell(即是table中td)来实现.当然设置display是不够,还要根据情况设置width.如下面 ...

  8. html中table,tr,td

    table表格,tr表格中的行,tr表格中的列,等级关系是table>tr>td, 当然表格中还包括thead,tbody,tfoot,th,但由于浏览器支持缘故很少使用.另外table在 ...

  9. <td></td>标签的border 样式在浏览器中显示不出来

    问题: 在一些浏览器中比如360浏览器的兼容模式下, <td style="border:1px solid red;"></td> 标签 中 的内容为空时 ...

随机推荐

  1. C# winform中 窗体缩放自适应的方法（不同电脑/不同分辨率）

    C# winform中 窗体缩放自适应的方法(不同电脑/不同分辨率)   窗体缩放是一个困扰我多时的问题,为了解决这个问题,我从网上找了很多相关的资料,很多人说用Anchor和Dock属性,但是我试了 ...

  2. Java学习---连接数据库操作

    Java连接Oracle数据库 package com.ftl.mysql; import java.sql.Connection; import java.sql.DriverManager; im ...

  3. 浅析VS2010反汇编

    第一篇 1. 怎样进行反汇编 在调试的环境下,我们能够很方便地通过反汇编窗体查看程序生成的反汇编信息. 例如以下图所看到的. 记得中断程序的运行,不然看不到反汇编的指令 看一个简单的程序及其生成的汇编 ...

  4. Wannafly挑战赛18 E 极差（线段树、单调栈）

    Wannafly挑战赛18 E 极差 题意 给出三个长度为n的正整数序列,一个区间[L,R]的价值定义为:三个序列中,这个区间的极差(最大值与最小值之差)的乘积. 求所有区间的价值之和.答案对\(2^ ...

  5. IntelliJ IDEA常用设置（转）

    IntelliJ IDEA是一款非常优秀的JAVA编辑器,初学都可会对其中的一些做法感到很别扭,刚开始用的时候我也感到很不习惯,在参考了网上一些文章后在这里把我的一些经验写出来,希望初学者能快速适应它 ...

  6. BeanDefinition的创建（BeanDefinitionHolder的创建）

    这个对另一篇章Bean Definition从加载.解析.处理.注册到BeanFactory的过程的扩展. Spring框架中BeanDefinition的继承结构. Spring框架中BeanDef ...

  7. 【bzoj3456】 城市规划

    题目 一句话题意,无向连通图计数 技不如人,甘拜下风 设\(f_i\)表示\(i\)个节点构成的无向连通图数量 之后...之后就不会了 于是抄题解 考虑容斥 \[f_i=t_i-\sum_{j=1}^ ...

  8. POJ 1743 Musical Theme 【后缀数组 最长不重叠子串】

    题目冲鸭:http://poj.org/problem?id=1743 Musical Theme Time Limit: 1000MS   Memory Limit: 30000K Total Su ...

  9. 【Java123】Yaml格式

    yaml文件与java bean互转 https://blog.csdn.net/z04915231/article/details/60143947 Yaml转换list,json,map工具类 h ...

  10. 26、springboot与消息

    概述: 1.大多应用中,可通过消息服务中间件来提升系统异步通信.扩展解耦能力消息服务中两个重要概念:           2.消息代理(message broker)和目的地(destination) ...