对于有很多条目的数据，通常采用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. 【wikioi】1026 逃跑的拉尔夫

    题目链接 算法:BFS 14.01.02 PS: 本人再次脑残,BFS又是写得那么脓肿,突然发现我原来什么搜索都是不会的呀.. //2014-02-05已更新 ******************** ...

  2. PTS PCR DTS 详解

    一.引言 MPEG-2系统用于视音频同步以及系统时钟恢复的时间标签分别在ES,PES和TS这3个层次中.在ES层,与同步有关的主要是视频缓冲验证VBV(Video Buffer Verifier),用 ...

  3. ubuntu下Vim配色方案Solarized的配置

    系统:ubuntu 12.04 LTS vim版本:7.4 ---------------------------------------------------------------------- ...

  4. Scala：使用Sublime开发Scala

    Scala:使用Sublime开发Scala 第一步:[Tools][Build System][New Build System] 第二步:在打开的新文件中输入: { //"cmd&quo ...

  5. Html - 仿QQ空间右下角工具浮动块

    仿QQ空间右下角工具浮动块 <style type="text/css"> .cy-tp-area>.cy-tp-fixbtn>.cy-tp-text { ...

  6. JAVA字符串转日期或日期转字

    文章中,用的API是SimpleDateFormat,它是属于java.text.SimpleDateFormat,所以请记得import进来! 用法:    SimpleDateFormat sdf ...

  7. 课堂Scrum站立会议演示

    组名:连连看 组长:张政 组员:张金生.李权.武志远 时间:2016.10.13   20:20--20:40 会议内容: 已完成的内容: 1.选定编译语言,安装软件并配置环境,完成了游戏的基本模型. ...

  8. HDU 1078 FatMouse and Cheese（记忆化搜索）

    FatMouse and Cheese Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  9. Ubuntu安装和设置SSH服务

    1.安装 Ubuntu缺省安装了openssh-client,所以在这里就不安装了,如果你的系统没有安装的话,再用apt-get安装上即可. 安装ssh-server sudo apt-get ins ...

  10. 使用scrapy爬取网站的商品数据

    目标是爬取网站http://www.muyingzhijia.com/上全部的商品数据信息,包括商品的一级类别,二级类别,商品title,品牌,价格. 搜索了一下,python的scrapy是一个不错 ...