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

后乐 2014-12-09

原文地址：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浏览器。
后乐

后乐

相关推荐

MySQL用truncate命令快速清空一个数据库中的所有表

用文本编辑器把每条truncate语句前后的“|”替换为空字符，方便后面一次复制多条执行。truncate与drop是DDL语句，执行后无法回滚；delete是DML语句，可回滚。truncate会清空表中的所有行，但表结构及其约束、索引等保持不变；dro

世樹 / 0评论 2020-11-11

详解MySQL alter ignore 语法

今天上班的时候，业务方问了我这样一个问题：我有一个表，需要添加一个唯一的字段，但是目前这个字段存在一些重复值，有没有好的解决办法。于是我详细询问了一下他的需求，最终得知，这个过程中重复的数据只需要保存一条就可以了，可以容忍一部分数据丢失，而重复的字段恰好是

SCNUHB / 0评论 2020-11-10

mysql实现从导出数据的sql文件中只导入指定的一个表

昨天系统自动备份了某一个数据库的全部表数据，名dbAll.sql.gz。今天因发现某一个表tableA的一条数据存在问题，需核对两条记录的变化。需从dbAll中找回tableA的数据，以便比较该记录。法3说明：将src_bake_db.sql.gz压缩文件

bleach00 / 0评论 2020-11-10

ThinkPHP5 链式操作table用法

table方法主要用于指定操作的数据表。用法一般情况下，操作模型的时候系统能够自动识别当前对应的数据表，所以，使用table方法的情况通常是为了：。需要注意的是table方法不会改变数据库的连接，所以你要确保当前连接的用户有权限操作相应的数据库和数据表。切

FellowYourHeart / 0评论 2020-10-05

sql注入 --显错注入

jiong / 0评论 2020-09-17

jQuery实现日历效果

jquery是用的是2.0版本。--基于W3C标准 不用做任何修改-->. --设置初始化文档信息和文档管理标注-->. --整个页面编码 utf-8 国际编码 通用性最强，GBK/gb2312 中文-->. .signincalenda

momode / 0评论 2020-09-11

程序员你是怎么绘制架构图？

作为一个程序员，假如让你绘制当前正在开发的项目的架构图，你会怎么绘制？先来同步一个理念。一种架构设计的方法论，忽略不在同一个抽象成绩的细节，从而可以更好的表达和可视化。可以类比地图，地图分4个级别，国家，省，市，街道；而C4模型也分4个层级，Context

思君夜未眠 / 0评论 2020-09-04

python 生成并下载文件-后端

rv.headers[‘Content-Disposition‘] += "; filename*=utf-8‘‘{}".format

jessieHJ / 0评论 2020-08-19

表格标签的使用

在HTML网页中，要想创建表格，就需要使用表格相关的标签。表格包含三对HTML标签，分别为<table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标

行吟阁 / 0评论 2020-08-09

HTML5标签2

表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...

gufudhn / 0评论 2020-08-09

mysql数据库基础

mysql数据库基础问题1：有没有一个表存的是所有数据库的库名？库名 schema_name；库名 table_schema；表名table_name字段名column_name；columns表里面啥都有。

末点 / 0评论 2020-08-03

padans 关于数据处理的杂谈 -- 时序数

那么实现2.1、2.2，不过这样的瓶颈就是，如果有很多个字段，则会组合成很多张表。cp = df[‘产品‘].to_frame().drop_duplicates. 输出一张工作表即可。有时还需要处理成，具有环比、比年初、同比等值。则采取给源数据增加字段。

nimeijian / 0评论 2020-07-30

Mysql入门 DML语句大全DML、DDL、DCL

Mysql 数据库语句 1、说明：创建数据库CREATE DATABASE database-name2、说明：删除数据库drop database dbname3、说明：备份sql server--- 创建 备份数据的 deviceUSE masterE

好记忆也需烂 / 0评论 2020-07-28

hive函数之~日期函数

语法: datediff返回值: int说明: 返回结束日期减去开始日期的天数。

tomson / 0评论 2020-07-05

hive函数之~字符串函数

int start, int len)返回值: string说明：返回字符串A从start位置开始，长度为len的字符串。注意，在有些情况下要使用转义字符,类似oracle中的regexp_replace函数。index)返回值: string说明：将字符

zlsdmx / 0评论 2020-07-05

hive函数之~关系运算

select 1 from tableName where 1 <> 2;hive> select 1 from tableName where 1 < = 1;select 1 from tableName where 2 >

tomson / 0评论 2020-07-05

如何理解HTML语义化的？

通常由PHP后端来写HTML，但是他们并不会CSS，于是就用table来进行布局。但我们都知道，table其实是用来展示表格的，这一条就与语义化严重相悖。后来前端慢慢分离成一个单独的岗位，他们会使用DIV+CSS布局，并且主要利用float和绝对定位进行布

tianqi / 0评论 2020-07-05

手把手教你怎么将linux的一个函数性能搞奔溃

static struct fib_table *fib_empty_table{ u32 id; for if return fib_new_table; return NULL;最近查一个问题，发现只要调用这个函数的时候，cp

onlykg / 0评论 2020-07-04

vue iview table表格 根据后端数据动态设置已选

先上需求，如图：主页是个子表，抽屉页是个父表，

cococai的 / 0评论 2020-07-04

hbase 建表 数据类型

下面几个shell 命令在后续的hbase 操作中可以起到很到的作用，且主要体现在建表的过程中，看下面几个create 属性1、BLOOMFILTER 默认是NONE 是否使用布隆过虑使用何种方式布隆过滤可以每列族单独启用。对ROW，行键的哈希在每次插入行

大而话之BigData / 0评论 2020-06-16

ORACLE日常-如何恢复oracle中误删除表(drop掉的)

注意：必须9i或10g以上版本支持，flashback无法恢复全文索引。如果想要完全删除，在最后增加purge即可。drop table 语句中，除非指定了purge字句，否则drop table并不会立即删除表，Oracle只是简单的重命名此表并将其存储

warden00 / 0评论 2020-06-16

Mysql 查询数据库容量大小的方法步骤

mysql> use information_schema;SUM(AVG_ROW_LENGTH*TABLE_ROWS+INDEX_LENGTH)/1024/1024 AS total_mb. table_schema,SUM(AVG_ROW_LEN

ltd00 / 0评论 2020-06-14

layui的table数据匹配问题

, { field: ‘code‘, title: ‘性别‘, width: 80, sort: true }. 今天遇到一天的坑，报错什么的。必须会有2个参数，可以用rquset修改参数名字。有默认格式，返回的格式也可以用修改，这就不多说了，官方帮助文档

dugujiujian / 0评论 2020-06-13

PHP mysqli_sqlstate() 函数

mysqli_sqlstate() 函数返回最后一个错误的 SQLSTATE 错误代码。错误代码包含五个字符。"00000" 表明没有错误。值由 ANSI SQL 和 ODBC 指定。规定要使用的 MySQL 连接。

FCLAMP / 0评论 2020-06-12

公司-IT-信息安全：江南天安

自成立以来，公司始终将人才发展战略放在首位，持续建设和培养专业型与复合型的精英团队，并引进一批优秀的专业人才队伍。目前，公司拥有多名业内知名的密码安全专家、PKI/CA技术专家、CISSP、CISP、CMM、PMP、CCIE、ITIL、Cobit等专业技术

xiaoemo0 / 0评论 2020-06-12

mysql 删除相关语句

-区别：delete 是一个一个删除，truncate直接删除一个表中所有数据后再创建这个表。

BiPerler / 0评论 2020-06-11

Vue + Element table中的某行触发enter事件后，使该行disabled

废话不罗嗦，上硬菜。Disabled:[], // 该行是否禁止编辑。　this.Disabled[index] = true, // 使input不可编辑

Feastaw / 0评论 2020-06-11

oracle表空间不足：ORA-01653: unable to extend table

oracle表空间不足报错是比较常见的故障，尤其是没有对剩余表空间做定期巡检的系统；oracle表空间不足错误代码：ORA-01653: unable to extend table ；上述代码可以查询中数据库有哪些表空间，总空间大小，剩余空间大小以及使用

warden00 / 0评论 2020-06-11

PHP mysqli_fetch_fields() 函数

返回包含字段定义信息的对象。如果没有可用信息则返回 FALSE。该对象有下列属性：

inhumming / 0评论 2020-06-11

批量生成修改oracle/sql server/mysql数据库各个表相同名字列的长度语句

SELECT ‘alter table ‘ || TABLE_NAME ||‘ modify 列名 VARCHAR2;‘ FROM USER_TAB_COLUMNS WHERE COLUMN_NAME = ‘列名‘ and TABLE_NAME;

jacklife / 0评论 2020-06-08

MySQL-增删改查简易操作

改：alter table t1 modify name char;改：update t1 set name=‘sb‘ where id=2;delete from t1; #如果有自增id，新增的数据，仍然是以删除前的最后一样作为起始。truncate

jiony / 0评论 2020-06-08

vim的基本操作

在光标所在行行首插入。删除光标所在处到行尾的内容。删除指定范围内的行。粘贴在当前光标所在行下。从光标所在处开始替换字符。搜索指定字符串的下一个出现位置。全文将字符串a替换成字符串b. :n1,n2s/字符串a/字符串b/g. 另存为新的文件名。快捷键，保存

想个标题偏头痛 / 0评论 2020-06-08

常用Oracle数据库查询SQL

expdemo/file=d：\back.dmptables=query=\" where filed1 like ‘fg%‘\". 导出时可以进行压缩；命令后面 加上compress=y ；如果需要日志，后面：log=d:\log.t

DAV数据库 / 0评论 2020-06-08

html table表格斜线表头的实现方法总汇

在html中给table加一个斜线的表头有时是很有必要的，但是到底该怎么实现这种效果呢？总结了以下几种方法：。其实了解css3的朋友，一看到这个效果，脑子中瞬间出现的就是transform这个属性，是的，这个确实可以，也很简单，就是有一个问题要注意浏览器的

玫瑰小妖 / 0评论 2020-06-07

## CSS 样式集合

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD. 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常). 粗细

vavid / 0评论 2020-06-05

mysql 错误：Table is marked as crashed and should be repaired 解决办法

mysql> use 数据库名称;

lysanderK / 0评论 2020-06-05

DOM对HTML元素的增删改操作和事件概念和事件监听

节点cloneNode，当deep为true时，表示复制当前节点以及当前结点的全部后代节点。创建选项除了使用前面所示的createElement方法之外，还可以使用专门的构造器来构造一个选项出来。<input id=”btn1” type="

书虫媛 / 0评论 2020-06-03

MySQL5.7配置GTID双主

grant replication slave on *.* to ‘ops‘@‘192.168.10.%‘ identified by ‘ops123‘;mysqldump -uroot -p --single-transaction --default

wanjichun / 0评论 2020-06-02

Python学习第95天（MySQL数据表操作）

　　昨天已经完成了在数据库中创建库和创建表，下面将详细介绍一下，针对穿件完成后的database之后，我们use database，然后create table table_name（filed type1，。。。。。field1 type[完整性约束条件

勇往直前 / 0评论 2020-06-01

Linux学习95 Linux防火墙iptables命令管理入门

　　1、iptables [-t table] {-A|-C|-D} chain rule-specification. 　　2、iptables [-t table] -I chain [rulenum] rule-specification. 　　3、

Proudoffaith / 0评论 2020-05-30

React 表格行点击事件

// onClick: this.clickRow.bind(this,record),};// onClick: this.clickRow.bind(this,record),};// current: 1,pageSize: 20,// defaul

BitsPlayer / 0评论 2020-05-29

html table表格标签内容如何居中显示？表格的align属性的用法介绍

本篇文章主要的介绍了关于HTML 表格table标签的居中使用，还有关于align属性在table表格标签中的使用方法，可以帮助表格对齐和表格中的文本对齐。接下来让我们来看看这篇文章吧。align 属性规定表格相对于周围元素的对齐方式。通过运用align属

lyg0 / 0评论 2020-05-28

Flink 流式聚合性能调优指南

SQL 是数据分析中使用最广泛的语言。Flink Table API 和 SQL 使用户能够以更少的时间和精力定义高效的流分析应用程序。此外，Flink Table API 和 SQL 是高效优化过的，它集成了许多查询优化和算子优化。但并不是所有的优化都是

xiaoyutongxue / 0评论 2020-05-27

Oracle临时表（Temporary Table）

指定GLOBAL TEMPORARY创建一个临时表，该表的定义对于具有适当特权的所有会话均可见。临时表中的数据仅对将数据插入表的会话可见。首次创建临时表时，其元数据存储在数据字典中，但未为表数据分配空间。会话可以使用TRUNCATE语句或在会话终止时解除绑

Carlos / 0评论 2020-05-26

oracle什么时候需要commit

今天在oracle的SQL plus 中执行了删除和查询操作，然后在PL/SQL中也执行查询操作，语句一样，结果却不一样，让我大感郁闷，后来才突然想到可能是两边数据不一致造成的，但是为什么不一致呢，就是没用commit，除非在DML命令之后执行了DDL命令

Kele0 / 0评论 2020-05-26

css3弹性布局

主要解决的是某个元素中子元素的布局方式。让页面布局更加的灵活。要发生弹性布局的子元素，他们的父元素，成为容器。就是设置display:flex的那个元素。项目们在主轴排列的顺序，称为主轴起点和主轴的终点。与主轴垂直的一根轴，叫做交叉轴。取值row 默认值，

yuanye0 / 0评论 2020-05-19

pandas (loc、iloc、ix)的区别

print # 获取行标签是"a"的一行数据。print # 无论输入的是"a"还是"0"都是

zhangxiaojiakele / 0评论 2020-05-19

Linux下查看压缩文件内容的10种方法

归档文件不是压缩文件，但压缩文件可以是归档文件。明白了这两个概念之后，我们正式介绍如何在不解压的情况下查看压缩文件内容。Vim 不仅仅是编辑器，它还包含其他许多强大的功能。不仅如此，使用 Vim 你甚至可以直接浏览归档文件，若其中有文本文件，你还可以直接

linuxhh / 0评论 2020-05-15

记录一下window idea 如何直连sparksql 使用hive数据元数据

换了几个开发环境，每次都会遇到sparksql连不上元数据的情况，整理一下脱坑吧。。。。。首先说一下几个文件吧，这些是我遇到的几个问题的解决方法，有可能你并不适用，仅供参考。　　Specified key was too long; max key len

zlsdmx / 0评论 2020-05-14

MySQL表自增id溢出的故障复盘解决

tokudb引擎的一个大表tb1，存放业务上的机审日志，每天有大量的写入， 并且由于历史原因，这张表是int signed 类型的，最大只能存 2147483647行记录 。同时业务上修改连接将这个表tb1的连接方式改走DBLE。但是业务上改完代码后，发现

予衡飞翔 / 0评论 2020-04-17