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. Mac下完全删除GarageBand

    https://www.tekrevue.com/tip/delete-garageband/ 已从应用程序列表删除,/资源库/Application Support/GarageBand/里的也删除 ...

  2. Spring MVC基本配置和实现(三)

    Item public class Item { private Integer id; private String name; public Integer getId() { return id ...

  3. Android实现身份证拍摄框

    http://blog.csdn.net/lhbtm/article/details/55505668 最近项目需要实现身份证拍照的功能,系统的相机并不能满足需求,故需要自定义相机,先上效果图,使用了 ...

  4. C#多线程顺序依赖执行控制

    在开发过程中,经常需要多个任务并行的执行的场景,同时任务之间又需要先后依赖的关系.针对这样的处理逻辑,通常会采用多线程的程序模型来实现. 比如A.B.C三个线程,A和B需要同时启动,并行处理,且B需要 ...

  5. [翻译] SlideInView

    SlideInView This is a quick and lightweight example of how to present a notification like view from ...

  6. [翻译] BBCyclingLabel

    BBCyclingLabel BBCyclingLabel is just like a UILabel but allows you to perform custom animations whe ...

  7. ORACLE 数据找回

    -- 找回一个小时前的数据 select * from sys_system_dictionary as of timestamp sysdate - 1/24order by id AS OF TI ...

  8. Office Online Server 2016 部署和配置

    Office Online Server 2016 部署和配置https://wenku.baidu.com/view/65faf8de846a561252d380eb6294dd88d1d23d45 ...

  9. MySQL 数据库--索引原理与慢查询优化

    索引的原理 本质都是:通过不断地缩小想要获取数据的范围来筛选出最终想要的结果,同时把随机的事件变成顺序的事件,也就是说,有了这种索引机制,我们可以总是用同一种查找方式来锁定数据. 索引的数据结构 b+ ...

  10. 利用Fiddler2和Proxifier分析你用的中国菜刀是否带有后门

    为了避免自己辛辛苦苦拿下的站点被一些拿来主义者不费吹灰之力就据为己有,下面来教大家如何检测菜刀有没有留后门. 对于有没有后门这个问题,大牛们会说抓包看一下就行了,那如何抓包呢?有很多软件可以,这里使用 ...