table 中，如何使得单元格的内容不换行，单元格不被撑开

最新推荐文章于 2020-10-26 09:43:22 发布

转载最新推荐文章于 2020-10-26 09:43:22 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yeminglong/p/5179692.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>table-layout:fixed</title>
<style type="text/css">
.dataTable { width: 100%; border: none; border-collapse: collapse; border-spacing: 0px !important; display: table; table-layout:fixed; }
.dataTable td { word-break: break-all; word-wrap:break-word; }
</style>
</head>

<body>
<table class="dataTable" border="1">
  <tr>
    <td width="120" align="center">阿罗裤剪短发了</td>
    <td width="40%">&nbsp;</td>
    <td width="120" align="center">&nbsp;</td>
    <td width="40%">&nbsp;</td>
  </tr>
  <tr>
    <td align="center">阿罗裤剪短发了</td>
    <td>&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td align="center">&nbsp;</td>
    <td>&nbsp;</td>
    <td align="center">阿罗裤剪短发了</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td align="center">&nbsp;</td>
    <td>&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/yeminglong/p/5179692.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34119545

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

css 之table td 内容超出 ... 显示，不撑开td ，不换行，... 显示样式方法

夜阑珊妖妖

09-06

3023

.conlistbox { position: relative; width: 100%; font-size: 14px; line-height: 40px; color: #333; table-layout: fixed; // 这里是重点！！ } th, td { width: 100px; height: 40px; padding: 0 5px; box-sizing: bord

td 内容自动换行 table表格td设置宽度后文字太多自动换行

09-28

table表格td设置宽度后文字太多导致自动换行，这是一个很常见的问题,或许很多的网友已经有了好的解决方法,如果依然有童鞋们不会的，可以参考下本文，可能会有意外的收获

参与评论您还未登录，请先登录后发表或查看评论

HTML中如何让表格的内容不换行显示

热门推荐

荷塘月色

11-18

2万+

在默认情况下，表格的内容可能会换行显示，那如果我们不想它换行显示该怎么办呢？下面将提供两种方法来实现不换行效果。

表格不被撑开，td某些列宽度固定某些列自适应

qq_15005259的博客

05-29

988

table标签设置style table-layout:fixed;word-break:break-all;background:#f2f2f2; td设置width固定 <td width="50">50px</td>

固定表格td宽度不被撑开

bluelotos893的博客

10-12

4764

在需要固定表头或表左侧列时，我们需要两个table，然后使用定位的方式达到锁定的效果，那么就需要保证两个表格的每个单元格宽度一致才不会被察觉出来是两个表格。有2种方案，1是等待两个表格都渲染完毕后，获取其中一个表格某行的单元格宽度，逐一设置宽度给另一个表格，达到两个表格同宽的效果。 2是设置百分比，td设置百分比的权重要比直接设置具体数值高，但是即使设置了百分比依然可能会被表格内的内容撑开超过...

表格(table)不被撑开的解决办法

HELLO WORLD

09-28

7505

今天在做一个用户留言列表的时候，用到了表格。用户名为英文字符时，就会把固定宽度的单元格撑开。之前也有遇到过。解决办法：先用nowrap强行令文字不换行，再用style="table-layout: fixed; word-break: break-all; border-collapse: collapse"强制表格不撑开，即达到效果。需要注意的是：用了nowrap的单元格设置的宽度要用百...

table 中，如何使得单元格的内容不换行，单元格不被撑开，显示不下的时候在结尾处显示“...”

06-01

在网页设计中，经常需要处理表格（table）的布局问题，特别是当单元格（cell）内的文本内容过长时，如何保持单元格的固定宽度，不让内容换行，并在显示不下的情况下添加省略号（"..."）表示内容被截断。这涉及到CSS...

javascript 使td内容不换行不撑开

12-13

在网页设计中，有时我们需要确保表格（`<table>`）中的单元格（`<td>`）内容不换行且不撑开单元格的宽度。这通常发生在显示长字符串或者需要控制表格布局的情况下。标题和描述中提到的问题是关于如何利用CSS来实现这...

HTML表格单元格内容不换行显示省略号技巧

在HTML表格中实现单元格内容不换行、不撑开单元格并在内容超出时显示省略号（"..."）是一项涉及CSS样式的任务。这种效果对于保持布局整洁和用户界面的一致性非常有帮助。下面详细介绍如何通过CSS和HTML实现这一需求...

layui-table固定列自动换行.txt

06-06

layui数据表格自动换行，当设置固定列时，会出现行高不一致的问题，用户体验不好，只需要在页面中增加几行代码即可解决。

table 中，如何使得单元格的内容不换行，单元格不被撑开，显示不下的时候在结尾处显示“...”...

rainbow702的博客

06-15

1576

之前的项目做过这种需求，但是由于不是自己亲手实现，所以以为只要使用 text-overflow 就可以实现这个需求了。但实事证明并没有那么简单。下面就把这个需求的实现要点理一下。先说一下几个要点： table 的 “table-layout”属性要声明为“fixed” 对表格的第一行中的每个单元格设置宽度。我用的是数值，不是百分比。对可能出现内容很长的单元格，设置以下三个属性： ...

浏览器系列：css+div如何解决文字溢出

行成于思，形之于文

02-21

1199

看到标题你一定很轻易就会想到截断文字加“...”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为似乎还有很多人不记得碰到这样的情况该如何处理。首先，先解释一下，一般用div+css的容器中文字超出长度会浮动到框外或者把框撑大，这个一般容易解决，但是我今天就遇到了这样的问题：在IE6下测试页面没反应，在IE8下测试页面却正常处理了溢出文字，我就郁闷了，这个溢出处理不是IE特有

关于html中使用table表格tr不换行的问题

lu10505的博客

12-03

1万+

在写注册界面的时候尝试用table表格来写用户注册信息但是在写的时候发现tr没有换行一开始以为是因为tr属性的原因，所以尝试了display:block; 结果当然不可行原因其实很简单因为在tr中没有加入td标签的时候，浏览器辨别你的其实都是tr标签简单的说，它认为你是在同一个tr里面，理所当然在同一行解决方案也很简单只要在每个tr里面用上td标签就可以即：

vue + element-ui 使用ex-table-column插件实现el-table的内容自动撑开表格且不换行的功能

@Grapefruit的博客

05-07

7537

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) 首先安装element-ui并实现引入，这个相信大家都会，柚子就不啰嗦了。下面开始第一步：安装ex-table-column插件 npm install ex-table-column --save //有条件可以使用c...

ElementUI表格列文字超出隐藏

Swallow的博客

10-26

6858

ElementUI表格列文字过多时，超出部分隐藏，鼠标悬浮显示内容有时候，表格某一列文字过多，会影响表格展示效果，有长有短的文字内容会把表格的高度撑的有高有低，这样就会影响表格的美观，我们可以给文字过多的列添加一个属性，如图： HTML： <el-table-column prop="title" align="center" label="商品标题" :show-overflow-tooltip="true"></el-table-column> 在这里的:show-

jquery.dataTables表格中的内容怎么设置让它不自动换行

weixin_34407348的博客

10-13

2400

在table中增加 style="white-space: nowrap;" ，这样会撑大td。会出现滚动条。其他内容配置：每列宽度： "aoColumnDefs": [ { "sWidth": "10%", "aTargets": [ 0 ] }, { "sWidth": "12