学做网站培训课程介绍

当前位置:

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表格也可以
  • 什么是自适应手机网站 视频教程 (1104256 次浏览)
    以下为学做网站论坛关于“什么是自适应手机网站”讲解视频教程。
  • 老师你好,我前几天一直在学习手机站课程,对于课程中的案例网站特别喜欢,自己就跟着课程一步步做了一遍。也做了课程笔记,感觉学到了很多知识。
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下如何使用一个CSS样式来控制多个DIV。在网页制作过程中,写CSS追求代码简洁,如果多个
  • 怎样在网页中嵌入表格 视频教程 (1120045 次浏览)
    网站如果需要使用一些数据时,使用表格来显示是特别好的方法。表格的优点在于它可以简洁明了地将图片、文本、数据和表单有序的显示在页面上,在不同的
  • 在学习做网站的时候,我在学习wordpress模板制作教程时,经常需要下载视频教程中“幻灯片演示”文件。可是里面的幻灯片尺寸和我们所需要的尺寸
  • 很多网站之前只制作了唯一的PC端网站,没有做自适应手机网站,这样用户访问网站时,就会显示PC端版面,导致在手机端只能显示出网站的一部分。如下图:
  • 在前面的建站教程中,我们介绍了HTML+CSS控制文字超出部分省略号,如果一行文字的数量超过一定的宽度就会隐藏并显示省略号。今天我们要介绍的功能是CS
  • 我们在做网站时,往往由于某个区块的宽度有限,我们的文字过多就会超过这个宽度。浏览器默认情况下是进行换行显示,但这会导航网站版面错乱,这在门户
  • 网页如何添加背景音乐 视频教程附件下载 (1117068 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背