学做网站培训课程介绍

当前位置:

table自适应:CSS控制table表格宽度超出网页的方法

在网页制作时,经常需要使用table表格来存放数据,但table表格有一个问题,当里面的内容宽度过多时,就会造成table表格的宽度超出了网页的宽度,比较难控制。怎么解决这样的问题呢?方法就是在CSS样式里控制table表格的宽度自适应网页宽度。

问题截图:

table自适应:CSS控制table表格宽度超出网页的方法

解决后的截图:

table自适应:CSS控制table表格宽度超出网页的方法

首页我们在CSS样式中,定义table的属性为table-layout:fixed; 然后定义table中td的属性,overflow:hidden;text-overflow:ellipsis; nowrap:false;代码如下:


table{table-layout:fixed;}
table td{overflow:hidden;text-overflow:ellipsis; nowrap:false;}

将上面的CSS代码放到CSS样式表里,就可以解决td中的内容过多,会实现TABLE自适应,隐藏多出的部分,然后有三个省略号表示隐藏的部分。(同类方法:CSS如何控制Table表格实现自适应

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • table表格是网页制作中以前较常使用的一种布局方式,但随着DIV+CSS的兴起,table表格已辉煌不在。但它在我们制作网页中也是时有用到。table表格也可以
  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果见这里;对于这样一种高大上的3D旋转轮播图,做起来并
  • 什么是自适应网页由于智能手机的普通,上网的终端设备已不局限于PC电脑了,有手机,平板,笔记本等等。宽度通常在600像素以下;PC的屏幕宽度,一
  • 什么是DIV+CSS 附件下载 (1155075 次浏览)
    本节建站课程高清视频下载链接: https://pan.baidu.com/s/1sl6nR8D 密码: urwgdiv+css就是把设计师设计好的图片,转变成一张静态页面的技术。html
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下DIV水平居中显示CSS代码。当我们写了一个DIV后,默认情况下,DIV是左对齐的,如何让一个DI
  • 怎样在网页中嵌入表格 视频教程 (1120651 次浏览)
    网站如果需要使用一些数据时,使用表格来显示是特别好的方法。表格的优点在于它可以简洁明了地将图片、文本、数据和表单有序的显示在页面上,在不同的
  • 在学习做网站的时候,我在学习wordpress模板制作教程时,经常需要下载视频教程中“幻灯片演示”文件。可是里面的幻灯片尺寸和我们所需要的尺寸
  • 很多网站之前只制作了唯一的PC端网站,没有做自适应手机网站,这样用户访问网站时,就会显示PC端版面,导致在手机端只能显示出网站的一部分。如下图:
  • 我们在做网站时,往往由于某个区块的宽度有限,我们的文字过多就会超过这个宽度。浏览器默认情况下是进行换行显示,但这会导航网站版面错乱,这在门户
  • 在前面的建站教程中,我们介绍了HTML+CSS控制文字超出部分省略号,如果一行文字的数量超过一定的宽度就会隐藏并显示省略号。今天我们要介绍的功能是CS
  • 静态网页不显示图片 (119350 次浏览)
    作者: 脉动Email: 511039684@qq.com详细内容:今天听了老师讲的课程第九节:什么是网站静态页面,然后自己就动手去照着做,文字什么的都可以显
  • DW中插入文字是最简单的操作,我们可以像在word一样随意的打出自己想要的文字。打开DW后,点击“设计”模式,在文字框中就可以打字了。插入文字可以是