`
517573897
  • 浏览: 9470 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

表格固定布局

阅读更多

这是一个简单的布局属性,内容如题。
本文主要讲解一个css属性:table-layout:fixed;。
本人在 画表格时,想要固定长度的列表格,但是始终不能如意,后来找到table-layout属性中有一属性"fixed"属性,能够固定表格的列长度,而不会随着 表格中列的长度变化而变化 。

使用和未使用了table-layout的区别看如下效果(有点,使用了该属性加载页面效率更快,因为在加载第一行数据的时候就已经确定了表格的布局,列长,列高已经固定,而未加该属性时,则需要加载完全部的表格数据才能确定表格的布局)。
上代码:

 

#_td1{
		width: 10%;
	}
	#_td2{
		width:10%;
	}
	#_td3{
		width:40%;
	}
	#_td4{
		width:40%;
	}
	#_table2{
		table-layout:fixed;
	}

<table id="_table1">
		<tr>
			<td id="_td1">111111111111111111111</td>
			<td id="_td2">22222222222222222222222222</td>
			<td id="_td3">333333333333333333333333333333333</td>
			<td id="_td4">44444444444444444444444444444444444444444</td>
		</tr>
		<tr>
			<td>111111111</td>
			<td>222222222222222</td>
			<td>333333333333333333</td>
			<td>44444444444444444444</td>
		</tr>
	</table>
<table id="_table2">
		<tr>
			<td id="_td1">111111111111111111111</td>
			<td id="_td2">22222222222222222222222222</td>
			<td id="_td3">333333333333333333333333333333333</td>
			<td id="_td4">44444444444444444444444444444444444444444</td>
		<tr>
			<td>111111111</td>
			<td>222222222222222</td>
			<td>333333333333333333</td>
			<td>44444444444444444444</td>
		</tr>
	</table>

 

  • 大小: 5.9 KB
分享到:
评论

相关推荐

    固定宽度表格布局设定宽度问题

    这里,`table-layout: fixed`属性让表格采用固定布局,即使内容超过设定宽度,单元格也不会自动扩展。`overflow: hidden`隐藏超出单元格的内容,`text-overflow: ellipsis`添加省略号表示内容被截断,`white-space: ...

    HTML页面table表格固定行和列

    固定左侧列则需要更复杂的CSS布局。一种常见方法是使用CSS的`display: flex`或`display: grid`,或者使用JavaScript来实现。以下是一个使用CSS Grid的例子: ```html .fixed-columns { display: grid; grid-...

    table表格固定行和列

    要实现`table表格固定行和列`,我们可以采用以下几种方法: 1. **CSS样式实现** 通过CSS定位技术,我们可以将表头(thead)和第一列(th)设置为固定位置。例如,使用`position: fixed`可以将元素从正常文档流中...

    DIV 实现表格布局

    在网页设计中,传统的表格布局通常使用`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`等HTML标签来实现,但随着CSS技术的发展,我们可以通过使用`div`元素结合CSS样式来实现类似表格的布局,这被称为“CSS布局”或“DIV布局”。这种布局...

    HTML表格固定第一行第一列效果

    为了解决这个问题,我们可以实现一个类似于Excel的功能,即在滚动时固定表格的第一行和第一列,使得在浏览大量数据时,关键的列名和行标识始终可见。以下将详细介绍如何实现这个效果。 首先,我们需要创建一个基本...

    HTML表格布局

    HTML表格布局是网页设计中一个基础且重要的部分,它用于组织和展示数据,如产品目录、数据统计或信息对比。在HTML中,我们使用`&lt;table&gt;`元素来创建表格,结合`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头)和`&lt;td&gt;`(单元格)等标签...

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

    5. 表格布局的行高度默认自适应,但可以通过`android:height`设定固定高度。 在实际应用中,开发者需要根据需求灵活选择布局。对于需要简单堆叠视图的情况,帧布局是一个不错的选择;而如果需要展示结构化的数据或...

    js实现表格部分固定

    - 如果项目中使用了Bootstrap、Element UI等CSS框架,需要注意这些框架可能已经提供了表格固定的解决方案。可以研究其API和文档,看看是否可以直接利用现有功能,避免重复造轮子。 7. **性能优化(Performance ...

    vue表格实现固定表头首列

    在Vue移动端项目中,开发人员经常遇到需要创建具备固定表头和首列的表格,以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下,利用Vue的核心特性实现这样一个功能。 首先,我们需要理解...

    表格表头固定 内容可以滚动(示例)

    ### 表格表头固定,内容可以滚动的技术实现 在网页设计中,有时我们需要实现一个功能:当用户滚动表格内容时,表头始终固定显示在顶部,以便于用户查看列名,提高数据阅读效率。本篇文章将围绕这一需求展开讨论,并...

    17表格布局

    在Android开发中,表格布局(TableLayout)是一种常用的方式来组织和展示数据,它允许开发者以二维表格的形式排列视图组件,如按钮、文本视图等。表格布局是Android框架中的一个视图组类,继承自LinearLayout,提供...

    DW网页布局表格布局表格PPT课件.pptx

    - **高度**:定义表格的高度,通常不设置固定高度,而是让其根据内容自动调整。 - **边框**:定义表格边框的粗细。 - **单元格间距**:定义单元格之间的距离。 - **单元格边距**:定义单元格内部内容与边框的...

    table固定行和列

    在深入学习CSS的同时,了解不同浏览器的兼容性和使用现代前端框架(如React、Vue、Angular等)中的表格组件也是很重要的,它们通常已经内置了对表格固定行列的支持,可以更方便地应用于复杂项目中。此外,掌握响应式...

    jquery 固定表格标题和列

    CSS样式则用来控制表格的基本布局,以及固定元素的定位和外观。 6. **JavaScript编程技巧**:在实现这个功能时,可能会用到一些JavaScript编程技巧,如事件委托、DOM操作(增删改查节点)、计算元素位置等。这些...

    Js实现表格头部第一行下拉固定

    为了解决这个问题,开发者通常会采用“表格头部第一行下拉固定”的技术,使得在滚动查看表格内容时,表头始终保持可见,方便用户对照查阅。本文将详细介绍如何使用JavaScript实现这一功能。 首先,理解这个需求的...

    纯CSS固定表头内容滚动表格

    "纯CSS固定表头内容滚动表格"是一种高效且用户友好的设计技巧,它允许用户在浏览长表格时始终保持表头可见,从而方便用户理解每一列的数据含义。这种设计方法尤其适用于那些包含大量数据且需要横向滚动查看的表格,...

    jQuery表格顶部右侧固定滚动代码.zip

    《jQuery表格顶部右侧固定滚动代码实现详解》 在网页开发中,数据展示是不可或缺的一环,尤其是当数据量较大时,使用表格进行呈现是常见且高效的方式。然而,当表格内容过多,需要横向滚动时,如何保持表头和部分列...

    jQuery仿excel表格头部固定内容滚动效果代码

    【jQuery仿Excel表格头部固定内容滚动效果代码】是一种在网页中实现类似电子表格的交互体验的技术,它使得用户在浏览长表格时,可以保持表头(即列标题)始终可见,即使当表格内容滚动时也是如此。这个功能在数据量...

    android固定头部和左侧表格实现

    在Android开发中,创建具有固定头部和左侧列的表格是一个常见的需求,这通常用于数据展示,使得用户可以更方便地浏览和理解大量的信息。标题"android固定头部和左侧表格实现"指的是在Android应用中实现一个功能,即...

    jQuery表格头和列固定插件

    **jQuery表格头和列固定插件——RWD Table** 在网页设计中,处理大型数据表格时,保持表头和特定列在用户滚动时可见是非常重要的功能。这有助于提高用户体验,尤其是当表格包含大量数据,需要用户上下左右滚动时。`...

Global site tag (gtag.js) - Google Analytics