1.TD不换行 nowrap属性

表格table的td单元格中，文字长了往往会撑开单元格，但是如果table都不够宽了，就换行了好像（不要较真其他情况，我只说会换行的情况）。换行后的表格显得乱糟糟，不太好看，我不喜欢这样的换行。当然可以通过对每列td都设置宽度，那样太麻烦了，并且有时没法预计td中的文字会有多长，没法给固定宽度。

为了让表格里文字不换行（预计也不会太长的字符串），可以给表格里td添加一个nowrap属性，如 <td nowrap>文字内容</td> 这样。

但是如果给每个td都加上nowrap属性，貌似太繁琐并且占用空间和流量。于是乎，我找css的实现方法，不擅长此术，尝试了n多个样式后，找到white-space: nowrap; 貌似跟直接给td加nowrap差不多，那么就可以像下面这样定义样式，即可实现td里不换行，字符串长了就撑宽表格宽度。

<html>

<head>

    <title>test</title>

    <style type="text/css">

        th {

            width:90px;

            white-space: nowrap;

        }

    </style>

</head>

<body>

    <table border="1" cellpadding="0" cellspacing="0">

        <tr>

            <th>

                我是乱七八糟的字符串

            </th>

            <th>

                悟空的博客

            </th>

            <th>

                www.7es.cn

            </th>

        </tr>

        <tr>

            <td>

                我是乱七八糟的字

            </td>

            <td>

                我很长哦

            </td>

            <td>

                悟空的博客

            </td>

        </tr>

    </table>

</body>

</html>

2.table 中 文字长度大于td宽度，溢出文本用“...”代替

.class1｛

text-overflow:ellipsis;

white-space:nowrap;

overflow:hidden;

}

text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。

我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

<html>

<head>

    <title>test</title>

    <style type="text/css">

        .mytable {

            table-layout: fixed;

            width: 400px;

            border: 0px;

            margin: 0px;

        }

        .class1 {

            text-overflow: ellipsis; /* for IE */

            -moz-text-overflow: ellipsis; /* for Firefox,mozilla */

            overflow: hidden;

            white-space: nowrap;

            border: 1px solid;

            text-align: left;

        }

    </style>

</head>

<body>

    <table class="mytable" border="1" cellpadding="0" cellspacing="0">

        <tr>

            <th width="30%" class="class1">测试</th>

            <th width="70%" class="class1">测试测试测试测试测试测试测试测试测试测试测试123123</th>

        </tr>

        <tr>

            <td>td1</td>

            <td>td2</td>

        </tr>

    </table>

</body>

</html>

参：

1.TD不换行 nowrap属性

2.table 中 文字长度大于td宽度，溢出文本用“...”代替

3.td长度固定，内容过长，超过部分用省略号代替

table 中 文字长度大于td宽度，导致文字换行 解决方案的更多相关文章

  1. 使用VUE实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部

    使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部 <template> <div> <table> <tr v-for="i ...

  2. 使用html及CSS实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部：

    使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部: <!DOCTYPE html><html lang="en">< ...

  3. 点击table中的某一个td,获得这个tr的所有数据

    功能: 点击table中的某一个td,获得这个tr的所有数据 效果图 <html> <head> <script> function getData2(elemen ...

  4. vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案

    vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案 原因:vue在进行输入时,进行了多次的render刷新渲染操作,导致了input框输入时发生的卡顿现象 解决方法:在 ...

  5. table中文字过长使用省略号

    1.设置table固定布局,否则自适应布局会不受控制 table{ table-layout: fixed; } 2.设定td宽度占比 <table> <col width=&quo ...

  6. table中绝对定位元素相对td定位失效解决方案

    开门见山! 问题:在一个table中,我需要在td里面绝对定位一个div, 写法:td{position:relative;} div{position:absolute;} OK,就这么简单,思路也 ...

  7. table中超过长度的列，显示省略号

    <style type="text/css"> .table-ellipsis { table-layout: fixed; width: 100%; } .table ...

  8. 设置当内容超出div（文字长度超出div宽度）出现滚动条

    overflow 一共有5个属性. 1.overflow:auto:内容会被修剪,超出设置的宽高后会出现滚动条 2.overflow:scroll;内容会被修剪,不管内容是否超出,都会出现滚动条的位置 ...

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

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

随机推荐

  1. PIL笔记

    图片颜色的类型 1 (1-bit pixels, black and white, stored with one pixel per byte) L (8-bit pixels, black and ...

  2. ThinkPHP+jQuery EasyUI Datagrid查询数据的简单处理

    ThinkPHP和jQuery EasyUI这两个都是不错的框架,现在要把它两个整合到一块,做个简单的Ajax调用查询. 在ThinkPHP模板中引入EasyUI的相关文件,然后设置按钮3的调用: & ...

  3. apache2.2 虚拟主机配置(转)

    转自:http://blog.csdn.net/zm2714/article/details/8351342 一.改动httpd.conf 打开appserv的安装文件夹,找到httpd.conf文件 ...

  4. 从前端的UI开始

    MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分都可以,这次我们主要讲解前端UI的部分. ASP.NET MVC抛弃了WebForm的一些特有的习惯,例如服务器端控件,ViewState这些东 ...

  5. 高并发分布式系统中生成全局唯一（订单号）Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  6. SQL Tuning Advisor

    SQL Tuning Advisorsql调优顾问可提供的建议有:-收集对象的统计信息-创建索引-重写sql语句-创建sql profile-创建sql plan baseline SQL Tunin ...

  7. Oracle 12C -- top-n查询新特性

    Oracle 12C -- top-n查询新特性在12C中,增加了一些新的特性.可以指定返回结果集的指定数量的行.或按照百分比返回行. SQL> select count(*) from emp ...

  8. Html5 canvas 绘制彩票走势图

    因须要 要实现一个类似彩票走势图的功能,初次学Html5 ,非常多地方不明白,前段时间也发帖请教过这个问题.也是没给个明白说话,在网上搜了非常多,也没有实现的样例,今天细致研究了下.发现事实上也不是非 ...

  9. asp.net 浏览器下载文件的四种方式

    // 方法一:TransmitFile实现下载 protected void Button1_Click(object sender, EventArgs e) { Response.ContentT ...

  10. tomcat启动报错 java.lang.ClassNotFoundException: org.apache.jsp.index_jsp

    项目运行一直很平稳,但是换了tomcat之后打开jsp网页时就报错,描述如下: 1. 错误描述 打开jsp网页时报错 java.lang.NullPointerException     org.ap ...