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. Android N（API level 24.）废弃了Html.fromHtml(String)

    从API level 24开始,fromHtml(String)被废弃,使用fromHtml(String source, int flags) 代替 flags: FROM_HTML_MODE_CO ...

  2. VUE知识day3_vue-cli脚手架安装和webpack模板项目生成

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

  3. c#之反射(Reflection)

    一.反射是什么 反射就是.Net FrameWork框架为我们提供的一个帮助类库,它可以读取我们通过编译后生成的dll和exe文件里面metadate的信息. 反射可以动态的加载dll和exe文件,动 ...

  4. 进程间通信——队列和管道（multiprocess.Queue、multiprocess.Pipe）

    进程: 之前我们已经了解了操作系统中进程的概念,程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程.程序和进程的区别就在于:程序是指令的集合,它是进程运 ...

  5. 使用ESP8266连接到Azure

    很多同学在问我,ESP8266如何连接到Azure,因为官方只有Spark Fun之类的DevKit(开发套件)出了教程(我只找到了套件的文档). 先上视频:http://v.youku.com/v_ ...

  6. tcp通讯中socket套接字accept和listen的关系

    今天看到一个文章,客户端的connect在服务端调用accept之前,突然想到这可以建立正常的连接么?以前从没细细的思考过listen accept connect之前的关系,带着疑问学习了一下,记录 ...

  7. 【[国家集训队] Crash 的文明世界】

    先写一个五十分的思路吧 首先这道题有一个弱化版 [POI2008]STA-Station 相当于\(k=1\),于是就是一个非常简单的树形\(dp\)的\(up\ \ and\ \ down\)思想 ...

  8. 数论——算数基本定理 - HDU 4497 GCD and LCM

    GCD and LCM Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total ...

  9. [19/05/01-星期三] GOF23_行为型模式(策略模式、模板方法模式)

    一.策略模式(strategy) [策略接口] /*** * "策略"接口 */ package cn.sxt.strategy; public interface Strateg ...

  10. AI-Info-Micron：用内存解决方案演化神经网络智能

    ylbtech-AI-Info-Micron:用内存解决方案演化神经网络智能 1.返回顶部 1. 用内存解决方案演化神经网络智能 我们的大脑每天会进行数千次极其复杂的操作.无论是提醒我们小心被炉子烫到 ...