对于有很多条目的数据，通常采用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. 【BZOJ】2435: [Noi2011]道路修建（树形dp）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2435 我怎么感觉那么水.. 坑的是,dfs会爆...好吧..用bfs.. //upd:我的智商也是醉 ...

  2. COJ262 HDNOIP201206施工方案

    HDNOIP201206施工方案 难度级别:A: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 c国边防军在边境某处的阵地是由n个地堡组成的. ...

  3. PCL 1.4.0 VS 2010 Configuration

    Open VS2010, create a new project, then open Property Manager, double-click Microsoft.Cpp.win32.user ...

  4. 八、job管理

    查看用法: [root@super65 ~]# salt-run -d|grep jobs'jobs.active:' #查看当前执行的job Return a report on all activ ...

  5. Trie

    字典树 class Trie { public: Trie() { root = new Node(); } ~Trie() { destroy(root); } void insert(string ...

  6. Java实战equals()与hashCode()

    一.equals()方法详解 equals()方法在object类中定义如下: 代码 public boolean equals(Object obj) { return (this == obj); ...

  7. SIP中OPTIONS方法的用法及示例

    SIP中OPTIONS方法的用法及示例 用OPTIONS方法实现Keep Alive SIP keep-alive方法

  8. 《Java核心技术卷一》笔记 多线程同步（底层实现）

    一.锁的基本原理 多个线程同时对共享的同一数据存取 ,在这种竞争条件下如果不进行同步很可能会造成数据的讹误. 例如:有一个共享变量int sum=0, 一个线程正调用 sum+=10,另一个线程正好也 ...

  9. PHP 错误与异常 笔记与总结（18 ）页面重定向实现

    在发生错误时,将用户重定向到另一个页面. <?php header('content-type:text/html; charset=utf-8'); class ExceptionRedire ...

  10. php 使用GD库上传图片以及创建缩略图

    php 使用GD库上传图片以及创建缩略图   GD库是PHP进行图象操作一个很强大的库. 先在php.ini里增加一行引用:extension=php_gd2.dll 重启apache.做一个测试页 ...