`

两种表格布局模式的区别

浏览器IEFirefox 
阅读更多

表格有两种布局模式auto和fixed,auto是默认值

指定表格宽度,不指定列宽度的时候

      auto模式下各列的宽度会按内容的宽度比例缩放,

      fixed模式下各列的宽度会等分

指定表格宽度,指定部分列宽度

      auto模式下减去固定列宽度的总和,剩下的列内容宽度比例缩放,所有列的宽度和等于表格宽度

      fixed模式下减去固定列宽度的总和,剩下的列等宽划分,,所有列的宽度和等于表格宽度

指定表格宽度,指定列宽度总和大于表格宽度

      auto模式下如果不指定文字自动换行所有宽度值会被忽略,如果指定自动换行会按比例缩放各列,FireFox仍然会忽略

      fixed模式下表格会被撑宽

当不指定表格宽度和列宽度时,表格宽度会有一个默认值,有的是100%,有的是内容宽度总和,因浏览器而异(标准浏览器始终由内容的宽度决定,IE在fixed模式下为100%,在auto模式下由内容决定,所以表格宽度还是指定的好,以免在不同浏览器下面有差异,不指定表格宽度但指定列宽度的时候,表格宽度就是列宽度的和

这是我一点一点试出来的结果,写出来与大家分享

分享到：
| jQuery Validation范例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    使用表格布局与线性布局实现分类工具栏

    本教程将深入探讨如何使用表格布局（TableLayout）和线性布局（LinearLayout）来实现一个分类工具栏。这两种布局在Android开发中非常常见，各有其特点和适用场景。 首先，线性布局（LinearLayout）是最基础的布局...

    024_UI_布局 之帧布局-表格布局

    本节我们将深入探讨两种常见的布局方式：帧布局（Frame Layout）和表格布局（Table Layout），这些都是Android开发中不可或缺的基础知识。 **帧布局（Frame Layout）** 帧布局是最基础的布局之一，它的主要特点是...

    lodop打印和后台print打印两种模式

    本文将深入探讨两种常见的打印模式：LODOP打印和后台Print打印，以及如何根据实际需求选择和切换这两种模式。 首先，我们来了解一下LODOP打印。LODOP（Local Operation and Data Output Program）是一款基于Web的...

    水晶报表例子（两种模式）

    在"水晶报表例子（两种模式）"中，我们将探讨两种常见的水晶报表使用模式。 **模式一：直接连接数据库** 在这个模式下，水晶报表会直接与数据库建立连接，获取数据并生成报表。用户可以通过设计界面选择数据库连接...

    自定义View之双表头表格(表头不动,EditView和TextView两种方式)

    本篇文章将深入探讨如何实现一个“双表头表格”，其中表头固定，同时支持EditView和TextView两种方式。双表头表格在数据展示时尤其有用，可以清晰地呈现层次结构，而表头固定则确保用户在滚动浏览数据时始终能看到列...

    VC制作电子表格

    `CComboBox`支持两种模式：简单模式（仅显示文本）和扩展模式（包含列表项和下拉列表）。通过添加、删除和检索组合框的项目，我们可以构建动态的下拉菜单，以满足不同单元格的数据需求。 最后，`CListCtrl`控件是...

    等高布局

    文件`grail_border_layout3.html`、`grail_border_layout2.html`可能涉及一种名为“Grail Border Layout”的布局模式，它是一种经典的等高布局技巧，用于创建具有左侧栏、右侧栏和主要内容区域的页面，其中两侧栏和...

    自定义表格_自定义表格_android_TableView_

    然而，它们并不完全满足所有表格布局的需求，比如行和列的动态调整、复杂单元格样式等，因此开发者常常需要自定义`TableView`来实现更复杂的布局。 2. **自定义TableView** - 自定义表格通常基于`ScrollView`或`...

    常见UI设计模式.pdf

    - **概念**：这是一种典型的分屏设计模式，通常分为横向和纵向两种布局方式。 - **应用场景**：当需要在同一页面内展示不同级别的信息时，主体/细节模式能够帮助用户在不同的内容层级间高效切换。 - **横向布局**：...

    ExtJS+FusionCharts结合的两种方法

    ExtJS提供了丰富的组件和布局模式，用于创建桌面级的Web应用。它包括表格、表单、树形视图等组件，支持拖放、分页、排序等多种功能。FusionCharts则专注于数据可视化，提供超过90种不同类型的图表，如柱状图、饼图、...

    在网页中应用表格PPT学习教案.pptx

    进入布局模式有两种方式，一是通过“查看”菜单选择“布局模式”，二是从插入面板的“布局”选项卡中点击“布局”按钮。 总的来说，掌握网页中的表格应用对于网页设计师和开发者至关重要，无论是在会计学还是其他...

    《精通CSS与HTML设计模式》(Pro CSS and HTML Design Patterns)中文版高清扫描版[PDF](part08)

    书中包含了350 多种可以立即使用的设计模式（涉及文本、背景、边框、图片、表格、布局等多方面），并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计，易于实现和使用。通过阅读此书，可...

    网站制作常用经典css.div.布局

    3. 弹性盒布局（Flexbox）：是现代浏览器支持的一种布局模式，可以方便地创建弹性伸缩的容器和子元素，适应不同屏幕尺寸。 4. 网格布局（Grid Layout）：提供二维的布局系统，允许精确控制行和列，适合创建复杂的...

    分栏布局--两栏

    本主题将深入探讨三种主要的分栏布局模式：CSS-table布局、浮动布局和定位布局。 首先，我们来看CSS-table布局。这种布局方式利用CSS的`display`属性设置为`table`、`table-cell`等值，模拟表格的行为来实现分栏。...

    table网页布局网站

    对于新项目，推荐优先考虑使用这两种现代布局方式。 7. **实践应用** "table布局的企业网站"这个主题意味着我们将学习如何在企业网站中有效利用Table布局。企业网站可能包括产品目录、服务介绍、联系方式等内容，...

    css布局之道

    通过实例和实践，读者可以深入理解每种布局模式的应用场景和最佳实践。 此外，书中可能还会涵盖一些现代CSS特性，如Flexbox和Grid的新功能，如Grid模板区域、自动间距、响应式设计等。同时，也会涉及如何处理浏览器...

    android表格控件动态生成表格源码

    本资源"android表格控件动态生成表格源码"提供了一种解决方案，它基于Eclipse IDE，可以帮助开发者实现动态生成表格的功能，同时解决了表格内容显示不全的问题，通过集成滚动条确保所有数据都能被用户查看。...

    网页的排和布局PPT学习教案.pptx

    3.2章节讲述了表格的三种模式：标准模式、扩展模式和布局模式。标准模式遵循浏览器的默认显示；扩展模式强调表格边界的可视化，便于编辑；布局模式则允许先规划好布局，再填充内容。新建表格可以通过插入表格或嵌入...

    android 布局精讲

    包括线性布局（Linear Layout）、相对布局（Relative Layout）、表格布局（Table Layout）、网格视图（Grid View）、标签布局（Tab Layout）、列表视图（List View）以及绝对布局（AbsoluteLayout），并详细介绍每种...

Magicbox
Global site tag (gtag.js) - Google Analytics