开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >table td 固定宽度，超出部分省略隐藏

table td 固定宽度，超出部分省略隐藏

作者头像

SpiritLing

发布于 2023-01-05 01:17:01

发布于 2023-01-05 01:17:01

2.4K00

代码可运行

举报

文章被收录于专栏：SpiritLingSpiritLing

运行总次数：0

代码可运行

1：先给table添加样式，要个宽度

1 table{
2     width: 1000px;
3 }

2：td增加样式

td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

下面为效果图

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-06-18，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

鹅厂写码13年，我总结的程序员高效阅读方法论

进程，线程，协程 - 你了解多少？

微服务与分布式系统设计看这篇就够了！

常见的布局实现

本章主要介绍常见的布局实现，包括： ---- [1] 两列布局 [2] 三列布局 [3] 弹性 (Flex) 布局 ---- [1] 两列布局子列固定宽度（设置 absolute、float），主列自适应屏幕（调整margin）。有 absolute + margin、float + margin、float + 负margin 等方式。 <!DOCTYPE html> <html> <head> <title>两列布局</title> <meta charset="utf-8">

echobingo

2018/04/25

8350

CSS 语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' selector { property: value; property: value; ... property: value } ''' 例如： 1 h1 {color:red; font-size:14px

用户1214487

2018/01/24

2.1K0

CSS&HTML面经专题——（三）CSS定位/盒模型/经典布局/浮动布局与BFC

position：static | relative | absolute | fixed | center | page | sticky

玖柒的小窝

2021/10/26

2K0

CSS&HTML面经专题——（三）CSS定位/盒模型/经典布局/浮动布局与BFC

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

题目要求：针对如下DOM结构，编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为200px，right宽度为300px，main处在中间，宽度自适应。要求：允许增加额外的DOM节点，但不能修改现有节点顺序。

全栈程序员站长

2022/09/07

1K0

实现三栏布局

使用CSS3的flex布局实现三栏布局，Flex布局也称弹性布局，可以为盒状模型提供最大的灵活性，是布局的首选方案，现已得到所有现代浏览器的支持，此处主要是利用flex容器成员默认按照主轴排列，以及利用flex属性即flex-grow，flex-shrink和flex-basis的简写形式将间的块自适应撑起。

WindRunnerMax

2021/02/04

4400

CSS 特征布局实例 - 导航栏、新闻列表、淘宝布局

block display point text 布局

重点：这里不能使用float:left的方式，因为这种方式不方便于居中。如果使用偏移的方式居中，当页数增加的时候，可能就不居中了。

Devops海洋的渔夫

2019/06/02

1.9K0

css属性及定位操作

container display overflow padding position

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

全栈程序员站长

2022/07/21

2.5K0

【CSS】固定定位示例 ( 屏幕左右两侧广告栏 | 开发要点分析 | 代码示例 )

css 开发浏览器

实现下图样式 : 中间部分是网页内容 , 左右两侧是固定广告栏 , 不管浏览器如何滚动 , 缩放 , 该左右两侧广告栏不变 ;

韩曙亮

2023/04/16

8710

【CSS】固定定位示例 ( 屏幕左右两侧广告栏 | 开发要点分析 | 代码示例 )

三种方法实现CSS三栏布局

本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果。

前端林子

2018/10/06

3.9K1

CSS 入门指南：轻松掌握网页布局与样式设计的艺术

css 容器布局入门设计

CSS（Cascading Style Sheets，层叠样式表）是一种用于为HTML元素添加样式的语言。CSS决定了页面上元素的外观：颜色、字体、布局等。

方才编程_公众号同名

2024/09/24

1710

CSS 入门指南：轻松掌握网页布局与样式设计的艺术

每日分享html特效篇1个侧边栏菜单+2个导航栏+1个登录页面+6个加载

1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。 2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。 3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。 4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。

淼学派对

2022/11/20

3.5K0

每日分享html特效篇1个侧边栏菜单+2个导航栏+1个登录页面+6个加载

圣杯布局与双飞翼布局

圣杯布局实现原理 html代码中，middle部分首先要放在container的最前部分，然后是left，right 将三者都设置 float:left, position:relative (因为

laixiangran

2018/04/24

8070

剖析一些经典的CSS布局问题，为前端开发+面试保驾护航

这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

桃翁

2019/11/09

1.2K0

剖析一些经典的CSS布局问题，为前端开发+面试保驾护航

【面试题解】你能用多少种方式实现两栏布局,三栏布局,圣杯布局,双飞翼布局？？

本系列面试题旨在学会相关知识点，从而轻松应对面试题的各种形式，本文讲解了前端常用的几种布局方式，包括两栏布局，三栏布局，圣杯布局，双飞翼布局。

一尾流莺

2022/12/10

4300

【面试题解】你能用多少种方式实现两栏布局,三栏布局,圣杯布局,双飞翼布局？？

每日分享html特效篇之一个菜单栏、一个渐变背景、一个加载特效、七个导航栏特效

网站腾讯云开发者社区 html

1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。 2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。 3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。 4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。

淼学派对

2022/11/20

2.4K0

每日分享html特效篇之一个菜单栏、一个渐变背景、一个加载特效、七个导航栏特效

css布局记录之双飞翼布局、圣杯布局

双飞翼布局和圣杯布局是比较常用的布局方式，都是为了实现一行三列，并且两侧列固定宽度，中间列宽度自适应的效果：直接上代码记录下：

用户1141560

2019/05/24

5430

【如果你要学JS XIII】——实现放大镜效果、client&scroll属性、固定侧边栏

2023腾讯·技术创作特训营第四期前端

client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

像素人

2023/12/26

4810

【如果你要学JS XIII】——实现放大镜效果、client&scroll属性、固定侧边栏

乐淘网侧边栏动画

在乐淘网买衣服时无意中发现了侧边栏的动画效果，没禁住诱惑尝试了一下，还挺难，不过做出来了。如有侵权请联系删除

我不是费圆

2020/12/17

7110

圣杯布局，双飞翼布局，和自己独创的布局

圣杯布局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圣杯布局</title> <style> * {

windseek

2018/06/15

4780

圣杯布局与双飞翼布局

上一篇文章介绍了三种方法实现CSS三栏布局，本文则在此基础上，进一步介绍常用的圣杯布局与双飞翼布局。

前端林子

2018/10/06

3.4K3

相关推荐

常见的布局实现

更多 >