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

在开发过程难免遇到这样那样的问题。对于有很多条目的数据，我们通常采用table元素来快速实现。如果某一个td的内容太多的话就会出现下面的情况，导致样式混乱难看。

解决方案

要让table的宽度固定我们可以给table元素设置table-layout:fixed;样式，但这样表格的宽度问题是解决了，但是里面的内容并不会自动换行。我们还需要给td设置word-break: break-all; word-wrap:break-word;即可完美解决。

http://www.7kxs.com/4gshouji/1761/

转载于:https://www.cnblogs.com/lxboy2009/p/3912844.html

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

elementUI table表格合并相同的内容
elementUI table表格合并相同的内容 1.表格和数据表格是这样数据(由于数据太多,只展示了几个) tableData: [{one: '1 . 产出指标',two: '1 .1 数量指 ...
table表格固定表头，内容滚动显示
目的:做一个table表格,实现固定标题行而内容可滚动 html部分代码如下: <!DOCTYPE html> <html><head><meta chars ...
表格中的td内容换行显示
需求:将表格中td内容的换行显示解决办法:将表格中的数据用 div标签包裹,并添加如下属性: white-space:normal; word-break:break-all; word-wrap: ...
table表格表头不懂，内容y轴滚动
table tbody {display: block;//设置内容为块height: 250px;//设置高度为250pxoverflow-y: scroll;//设置y轴滚动 }table the ...
element-plus table表格换行变色以及部分el自带样式的修改
element-plus table表格换行变色次处为表头颜色修改 :header-cell-style="{ background: '#0B3357' }" 在el-tabl ...
table表格tr、td、合并、间距、边框合并、设置边距代码
table边框与td合并代码: 写在style里面生效 border-collapse: collapse; 设置边框写在table里面,就表示每一个都带边框 border="1px so ...
导出的图片太大导致无法打开的解决方案
原文:http://www.arceyes.com/bbs/thread-18389-1-1.html 我们下载地图时经常会遇到图打不开的问题,遇到此种情况我们只能选择更低的级别或导出为多张大图片. ...
html表格不会自动变形,CSS 解决td里面内容太多把表格弄变形的原因，设置自动换行。...
1 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前 ...
html表格不能横向自动展示,html table表格列数太多添加横向滚动条
HTML的table表格的列数如果太多或者某一列的内容太长,就会导致表格td的内容被挤压变形,对后台的使用体验非常不友好.比如下面的情况: 那么如何在表格列数较多的情况下添加横向滚动条?其实很简单,只 ...

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

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

最新文章

热门文章