参考：https://blog.csdn.net/lunhui1994_/article/details/81120579

效果：

html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        <title>test</title>

        <link rel="stylesheet" href="css/amazeui.css">

        <script type="text/javascript" src="js/jquery.min.js"></script>

        <style>

            .table-items {

                table-layout: fixed;//td的宽度固定，不随内容变化

            }

            .table-items>tbody>tr>td {//文字超出显示省略号

                overflow: hidden;

                white-space: nowrap;

                text-overflow: ellipsis;

            }

        </style>

    </head>

    <body>

        <div class="am-cf">

            <table class="am-table am-table-hover table-items">

                <thead>

                    <tr>

                        <th style="width:25%">序号</th>

                        <th style="width:40%">姓</th>

                        <th style="width:35%">名</th>

                    </tr>

                </thead>

                <tbody id="table-body"></tbody>

            </table>

        </div>

        <script type="text/javascript">

            var dataList = [{

                id: 1,

                first_name: 'honorificabilitudinitatibushonorificabilitudinitatibus',

                second_name: 'antidisestablishmentarianismantidisestablishmentarianism'

            }, {

                id: 2,

                first_name: 'floccinaucinihilipipificationfloccinaucinihilipipification',

                second_name: 'supercalifragilisticexpiadocioussupercalifragilisticexpiadocious'

            }, {

                id: 3,

                first_name: 'hepaticocholecystostcholecystntenterostomyhepaticocholecystostcholecystntenterostomy',

                second_name: 'pneumonoultramicyoscpicailicovolcanoconiosispneumonoultramicyoscpicailicovolcanoconiosis '

            }];

            $(function() {

                var str = '';

                for (var i = 0; i < dataList.length; i++) {

                    str = "<tr><td title=" + dataList[i].id + ">" + dataList[i].id + "</td>" +

                        "<td title=" + dataList[i].first_name + ">" + dataList[i].first_name + "</td>" +

                        "<td title=" + dataList[i].second_name + ">" + dataList[i].second_name + "</td>" +

                        "</tr>";

                    $('#table-body').append(str);

                }

            })

        </script>

    </body>

</html>

td里的title属性是鼠标悬停上方时显示内容。

table 单列宽度设置的更多相关文章

  1. table 的宽度设置无效

    1.在table 标签添加样式 table-layout: fixed; 必须设置width的值:<table style="table-layout: fixed"> ...

  2. table表格宽带研究（附带：table表格为什么设置td宽度无效）

    情况1:下面代码定义了表格宽带为为600px,未设置td宽带,3个td内容为1,2,3,可以看到3个内容平分table的宽度. 也就是每个td都是200px(请注意:如果用chrome调试宽度,会有一 ...

  3. 表格Table宽度设置无效的解决方法

    表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...

  4. table表格宽度固定，同时td内容过长也不会被撑开

    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}

  5. css中关于table的相关设置

    一.设置好看的单边框表格 1.一种实现方式 分别给table标签和td标签设置不在同一方向的border属性,如下table设置‘左上’边框,td设置‘右下’边框.其他设置方式同样可以实现. tabl ...

  6. Table的一些设置（自适应以及溢出）

    table的两个属性 单行溢出点点显示 表格的宽度设置 双栏自适应连续连续英文符换行 1.table重置的两个属性: ①border-collapse: collapse;      /* 为表格设置 ...

  7. TD中INPUT的宽度设置

    最近在用C#做Web程序时,碰到一个问题: 将TextBox的asp控件放在Table中的TD里面时,不设置宽度,自动会将TD撑的很大. 查看运行后页面的源代码发现,其实TextBox控件最终在客户端 ...

  8. 如何固定table表格宽度，样式不受容器影响

    之前有篇关于LODOP打印超文本表格,两个样式相同的表格,出现错位的情况.该博文地址:LODOP打印表格错位的几种情况该文试验了两种现象,第一种浏览器页面显示错位,打印预览也错位,第二种浏览器页面表格 ...

  9. LODOP打印table表格宽度固定-超宽隐藏

    之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认的t ...

随机推荐

  1. Java学习之集合（List接口）

    List特有的常见方法:有一个共性特点:都可以操作角标 1.添加  void add(int index, E element); void addAll(int index, collection& ...

  2. Linux文件映射的反思

    1. 思考 多个进程可以加载相同的共享链接库,比如C语言的运行库,加载运行库采用内存映射文件的方式,可以延迟对于文件内容的读入操作. 共享链接库文件,是一个elf格式的库文件,里面会包含多个不同的se ...

  3. super_blocks没有导出

    在模块中,通过查询super_blocks列表,来遍历系统中的所有super_block,但是出现与下面类似的错误: http://stackoverflow.com/q/5051111/941650 ...

  4. Android Telephony分析(六) ---- 接口扩展(实践篇)

    本文将结合前面五篇文章所讲解的知识,综合起来,实现一个接口扩展的功能.如果还没有阅读过前面五篇文章的内容,请先阅读:<Android Telephony分析(一) — Phone详解 >& ...

  5. git 强制取消本地修改

    本地的项目中修改不做保存操作,可以用到Git pull的强制覆盖,具体代码如下: git fetch --allgit reset --hard origin/master git fetch 指令是 ...

  6. 《深入理解Java虚拟机》- 重载与重写

    这一节打算从“方法调用”的主题进行分析. 方法调用并不等同于方法执行,方法调用阶段唯一的任务就是确定被调用方法的版本(即调用哪一个方法),暂时还不设计方法内部的具体运行过程. 一.概念 解析调用:所有 ...

  7. dp思维

    题目传输门 题意:有n个房间,m个诅咒,每个房间有一个数值,刚开始有一个初始值,每次进入一个房间可以选择消除诅咒或者不消除,消除诅咒只能顺序消除,消除诅咒就是拿初始值和房间的数值做运算,求最后最大的数 ...

  8. 如何去实现一个运用于多平台的SDK ？

    开始要求实现一个SDk的时候,一脸懵逼,以前总是调别人的SDK暴露的接口与方法,现在自己去实现一个,可以用到各平台上,还是相当有难度的,经过大半月的研究还是有点眉目的,想在这里和大家分享一下鄙人简陋的 ...

  9. QT MSVC2017 ratio chrono

    如果引用了stdint.h可能会引发一些列错误,各种未申明和语法错误. 参加以下帖子解决问题 https://github.com/ftylitak/qzxing/issues/54 When com ...

  10. [转载]A星寻路算法介绍

    转载自:http://www.raywenderlich.com/zh-hans/21503/a%E6%98%9F%E5%AF%BB%E8%B7%AF%E7%AE%97%E6%B3%95%E4%BB% ...