`

如何设置HTML页面自适应宽度的table(表格)(一)

    博客分类:
  • html
 
阅读更多

原文地址:http://blog.sina.com.cn/s/blog_66d8992d0100pb5i.html

WEB应用的页面,表格的表现形式是常常遇到的,在列数有限的前提下,如何将各列中的内容自适应到不同分辨率的屏幕,这应该是一个比较容易遇到的问题,下面就来谈一谈我对这类问题的解决与看法。

 

将所有列设置为固定宽度,显然是不能满足此类要求的,但是若把全部的列都设置为百分比,恐怕在某些尺寸,或分辨率下,会变得很难看。在Bigtree看来,比较习惯于用如下的方式来处理——在表格列数不是很多的前提下——将大部分列宽用固定值设置死,留下一列不设置宽度,将table的宽度设置为屏幕的百分比(譬如95%、98%等)。
例:
<table width="95%" border="1" cellpadding="2" cellspacing="1">
  <tr>
    <td width="50px" nowrap>序号</td>
    <td width="150px" nowrap>分类A</td>
    <td width="150px" nowrap>分类B</td>
    <td width="200px" nowrap>名称</td>
    <td nowrap>说明</td>
    <td width="100px" nowrap>操作</td>
  </tr>
  ……
</table>

 

在本例中,名为“说明”的列,内容比较长,个人认为可以将此列设置为浮动宽度列,用以自适应页面的宽度。

 

但是当该表格中出现长度比列幅宽的半角字符时,td的宽度会被内容撑破,应该如何解决呢?

 

解决此问题的方法是:在明细行的td中,追加style="word-wrap:break-word;",这样做可以使半角连续字符强制换行,不至于撑破列宽。
例:
    <td align="left" width="150px" style="word-wrap:break-word;">
      ……
    </td>

 

应用此方法,针对设置了width宽度的td列可以解决,但是如果没有设置宽度的td列,是无法生效还是会被撑破td的,应该如何解决呢?

 

解决此问题的方法是:在定义表格时,追加style="table-layout:fixed;",这样做可以使半角连续字符强制换行,不至于撑破列宽。需要注意的是,使用此参数后,不要轻易在tr(行)或td(列)中加入height属性,会使table不再被内容撑出适合的高度
例:
<table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed;">
  ……
</table>

 

此方法适用于IE与FireFox浏览器。
分享到:
评论

相关推荐

    SWT表格管理类(包括表头排序,隔行颜色,表格宽度自适应)

    SWT表格管理类,包括表头排序事件,table宽度自适应事件,隔行颜色事件

    Jquery图片自适应宽度和表格List自适应屏幕宽度!

    标题 "Jquery图片自适应宽度和表格List自适应屏幕宽度!" 涉及到的是网页前端开发中的响应式设计,特别是如何利用Jquery库来处理图片和表格在不同屏幕尺寸下的显示问题。响应式设计是现代网页开发的重要组成部分,它...

    HTML页面自适应宽度的table(表格)

    本篇文章主要探讨如何实现HTML页面中表格的自适应宽度,使得内容能够在各种屏幕尺寸下保持良好的可读性和视觉效果。 首先,我们不能简单地将所有表格列(td)设置为固定宽度,因为这可能导致在某些屏幕尺寸下内容...

    自适应Table表格样式代码.zip

    在这个"自适应Table表格样式代码.zip"压缩包中,我们主要关注的是如何使用HTML和CSS3来创建一个响应式的表格,以实现跨平台的良好用户体验。此外,JavaScript也可能被用来增强表格的功能,如交互性或动态调整。 ...

    jQuery自适应浏览器宽度响应式表格插件basictable

    basictable插件是一款jQuery自适应浏览器宽度响应式表格插件,可以设置breakpoint来定制自己的响应式断点,该表格能适应台式电脑,平板和手机的需求,响应式效果非常好,现在网站很多都有多平台版本了,这个效果非常...

    html表格头部固定 相应单元格宽度自适应内容区域单元格

    我们可以创建一个包含表头的独立表格,并将其定位在页面的顶部,即使内容区域滚动,表头也会保持在屏幕的固定位置。以下是一个基本的CSS实现步骤: 1. 将表格分为两部分:thead(表头)和tbody(表体)。 2. 使用...

    基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件

    它由多个table-column定义,每个table-column对应表格的一列,可以设置字段名、标题、宽度等属性。二次封装的过程就是对这些table-column进行扩展,添加新的功能和行为。 在实现自适应列宽的功能时,我们可能会采用...

    改变table的列宽度

    改变table的列宽度,可以拖拽的td表格,表格内文字只显示一行,超过的部分自动隐藏

    jqGrid的自适应表格

    shrinkToFit: true, // 自适应宽度,使表格宽度与父容器相匹配 height: 'auto', // 自动调整高度,根据数据数量和窗口大小 loadComplete: function () { var $self = $(this); if ($self.jqGrid('getGridParam'...

    解决Layui 表格自适应高度的问题

    成功解决问题,不要在field中添加高度,可以自行设置宽度,这样就可以让表格自适应高度了~! 以上这篇解决Layui 表格自适应高度的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持...

    自适应表格,适用于PC,手机同一页面

    标题"自适应表格,适用于PC,手机同一页面"揭示了这个设计策略的核心目标:创建一个可以在桌面电脑和移动设备上无缝切换的表格,而不仅仅是简单地缩小尺寸。这意味着表格不仅需要在大屏幕上保持原有的结构,还需要在...

    html5响应式表格插件设置自适应表格代码

    HTML5响应式表格插件是现代网页开发中的一个重要工具,它允许网页的表格在不同设备和屏幕尺寸上自适应展示,提供优秀的用户体验。在移动设备普及的今天,确保网站在手机、平板和桌面电脑上都能良好显示变得至关重要...

    jQuery自适应浏览器宽度响应式表格插件basictable.zip

    其中,jQuery自适应浏览器宽度的响应式表格插件——basictable,就是解决移动端表格显示问题的一个强大工具。 basictable.js是这个插件的核心文件,它允许表格在小屏幕设备上优雅地呈现。当屏幕宽度不足以显示完整...

    bootstrap自适应表格

    Bootstrap自适应表格是Bootstrap框架的一个重要特性,它能够确保在不同设备和屏幕尺寸上提供良好的用户体验。本篇文章将深入探讨Bootstrap自适应表格的原理、实现方法以及相关知识点。 首先,Bootstrap是一个流行的...

    任意改变table表格td的宽度 支持表格TD拖拽

    压缩包中的“任意改变table表格的宽度”文件可能包含了一个实现此功能的示例代码,可以下载并查看其具体实现方式。理解并掌握这个功能,对于前端开发者来说,能够提高网页的交互性和用户体验。在实际项目中,可以...

    EasyUI 数据表格datagrid列自适应内容宽度的实现

    在数据表格中实现列宽自适应内容宽度,通常的做法是遍历表格中的每一列,通过比较内容的长度来确定列的宽度。例如,在EasyUI的datagrid中,我们可以编写一个函数,该函数首先加载表格,然后获取表头字段列表,并获取...

    flexigrid列表自适应宽度

    我们都知道flexigrid表格插件的列宽只能设为固定的值,不能使用百分比来自适应窗口的变化。 本例通过修改flexigrid的源代码来实现列宽的自适应变化。如下使用:{display:'XXX',name:'XXX',width:'30%',sortable:...

    【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用

    【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用 【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用 【vue+el-table】表格操作列宽度跟随按钮...

    表格自适应手机页面

    "表格自适应手机页面"这一主题正是关注如何使传统的HTML表格在手机等小屏幕设备上呈现得更加友好。在这个过程中,主要涉及到的技术是响应式设计,通过调整表格的布局和样式,确保在不同尺寸的屏幕上都能清晰、易读。...

    自适应Table表格样式代码

    自适应Table表格样式代码是为了确保无论用户使用何种设备浏览网页,表格都能保持清晰、易读且布局合理的状态。本文将详细讲解如何实现这样的效果,并介绍相关的关键技术和实践方法。 首先,我们需要理解表格的基本...

Global site tag (gtag.js) - Google Analytics