对于有很多条目的数据，通常采用table元素来快速实现,某一个td的内容太多的话就会导致样式混乱难看.

解决方案

要让table的宽度固定可以给table元素设置table-layout:fixed;样式，

但这样表格的宽度问题是解决了，但是里面的内容并不会自动换行。还需要给td设置word-break: break-all; word-wrap:break-word;。

table表格某一td内容太多导致样式混乱的解决方案的更多相关文章

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

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

  2. html 让table表格中的td单元格内容过长显示为固定长度，多余部分用省略号代替?

    <th class="wrap">商品名</th> .wrap{ width: 150px; //设置需要固定的宽度 white-space: nowrap ...

  3. table表单中的td内容两端对齐

  4. node_modules内容太大导致webstrom非常卡

    选中一个文件夹,例如node_modules,点击右键->mark directory as ->excluded,这样就可以把这个文件标记并排除出来,使webstorm不会扫描这个文件下 ...

  5. 关于table表格 td里内容较多换行的处理方法

    最近在用table的时候由于td内容较多默认换行了,很不美观.于是找到处理方法: 在声明table的时候添加一个样式: <table id="tbOffice" data-r ...

  6. html table表格列数太多添加横向滚动条

    HTML的table表格的列数如果太多或者某一列的内容太长,就会导致表格td的内容被挤压变形,对后台的使用体验非常不友好.比如下面的情况: 那么如何在表格列数较多的情况下添加横向滚动条?其实很简单,只 ...

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

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

  8. 双击Table表格td变成text修改内容

    //先不多说这里上我的页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. table:设置边距,td内容过长用省略号代替

    table:设置边距,td内容过长用省略号代替 1.table:设置边距 合并表格边框border-collapse: collapse,然后用th,td的padding设置内容和边框之间的空隙pad ...

随机推荐

  1. 【POJ】1269 Intersecting Lines（计算几何基础）

    http://poj.org/problem?id=1269 我会说这种水题我手推公式+码代码用了1.5h? 还好新的一年里1A了---- #include <cstdio> #inclu ...

  2. mysql中datetime与timestamp的比较

    相同 显示 TIMESTAMP列的显示格式与DATETIME列相同.换句话说,显示宽度固定在19字符,并且格式为YYYY-MM-DD HH:MM:SS. 不同 范围 datetime 以'YYYY-M ...

  3. C#中的String.Format方法（转）

    一.定义String.Format是将指定的 String类型的数据中的每个格式项替换为相应对象的值的文本等效项. 如: (1)string p1 = "Jackie";strin ...

  4. JS中定义类的方法

    JS中定义类的方式有很多种: 1.工厂方式    function Car(){     var ocar = new Object;     ocar.color = "blue" ...

  5. Configuration of OpenCV2.1.0 with VS2010

    Add in the system Path: C:\Program Files (x86)\OpenCV-2.1.0\build\bin\Debug Project->Project Prop ...

  6. dtd语法之定义属性

    1.语法: <!ATTLIST 元素名称 属性名称 属性类型 默认值>  属性类型: l CDATA :文本数据 l (en1|en2|……) :属性值任选其一 l ID :属性值必须是唯 ...

  7. TinyMCE在线编辑器使用方法初探

    首先,下载TinyMCE包,地址:http://www.tinymce.com/ 然后将下载后的包解压,放置到一个文件夹下,创建一个html文件,并在其中书写如下代码: <!DOCTYPE ht ...

  8. Hadoop工程包架构解析

    Hadoop源码解析 1 --- Hadoop工程包架构解析 1 Hadoop中各工程包依赖简述    Google的核心竞争技术是它的计算平台.Google的大牛们用了下面5篇文章,介绍了它们的计算 ...

  9. 【液晶模块系列基础视频】4.2.X-GUI图形界面库-画矩形函数简介

    [液晶模块系列基础视频]4.2.X-GUI图形界面库-画矩形函数简介 ============================== 技术论坛:http://www.eeschool.org 博客地址: ...

  10. 《Java核心技术卷一》笔记 多线程

    有时,我们需要在一个程序中同时并行的处理多个任务,如播放器一边要播放音乐同时还要不断更新画面显示,或者是一边执行耗时任务,UI还能一边继续响应各种事件.还有的时候,一个任务需要很长时间才能完成,如果分 ...