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

table中colspan控制

阅读更多
表格中如果增加了 colspan 属性,如果colspan所在属性td或th元素宽度大于表格中固定宽度时,表格将不再固定,而是自适应,如
<table border='1' width="100%" style='table-layout: fixed;'>
<tr>
    <td width='100' >1</td>
    <td width='150'>1</td>
    <td>1</td>
</tr>
<tr>
    <td colspan='3'><div style="width:700px;background-color:red;"></div></td>
</tr>
<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
</tr>
</table>
此时表格中 首行 td width属性将不再有效。如何固定宽度。一般在表格中定义属性
table-layout: fixed;使其固定
如果一下情况colspan 在第一行情况下 ,td中也将失效
<table border='1' width="100%" style='table-layout: fixed;'>
<tr>
    <td colspan='3'><div style="width:700px;background-color:red;"></div></td>
</tr>
<tr>
    <td width='100' >1</td>
    <td width='150'>1</td>
    <td>1</td>
</tr>
<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
</tr>
</table>

这时可以在最上边加以下代码来控制td宽度
<colgroup>
 
      <col width=60%></col>
       <col width=20%></col>
       <col width=20%></col>
</colgroup>

如:
<table border='1' width="100%" style='table-layout: fixed;'>
<colgroup>
       <col width='100'></col>
       <col width='150'></col>
       <col ></col>
</colgroup>
<tr>
    <td colspan='3'><div style="width:700px;background-color:red;"></div></td>
</tr>
<tr>
    <td width='100' >1</td>
    <td width='150'>1</td>
    <td>1</td>
</tr>

<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
</tr>
</table>
转载:http://blog.sina.com.cn/s/blog_506d9e2001018254.html
分享到:
评论

相关推荐

    javascript 动态table添加colspan\rowspan 参数的方法

    2. 接着,找到表格中特定的单元格,通常是通过`rows`数组来访问行,然后通过`cells`数组来访问该行中的单元格,例如`document.tableId.rows[i].cells[j]`。 3. 最后,直接对获取到的单元格对象设置`colSpan`或`...

    table合并单元格的多种方法

    在表格(Table)设计中,有时我们需要合并单元格来达到特定的展示效果,例如创建标题行或列,或者为了美观和布局对齐。在HTML、CSS以及JavaScript中,都有多种方式可以实现单元格的合并。这里我们将详细探讨六种合并...

    table 的用法 网页设计 中html 语言中table用法

    本文将深入探讨HTML语言中`&lt;table&gt;`元素的用法,包括如何创建基本表格,以及如何通过各种属性来定制表格的外观和行为。 首先,一个基本的表格由`&lt;table&gt;`标签开启,`&lt;/table&gt;`标签结束。表格的行是由`&lt;tr&gt;`(表格行...

    表格设置table-layout:fixed后对单元格宽度设置无效

    在对HTML中的表格进行样式设置时,若使用了CSS的table-layout:fixed属性,则可能会遇到列宽设置无效的问题,尤其是当表格中存在跨列或多列合并的单元格时。这主要是因为当表格布局设置为固定时,表格的列宽不是由...

    html中table表格导出Excel示例(亲测可用)

    要使表格具有复杂的样式,如合并单元格,可以使用`colspan`和`rowspan`属性,以及CSS来控制样式。 接着,`jquery`是一个流行的JavaScript库,简化了DOM操作、事件处理和Ajax交互。在本示例中,jQuery将帮助我们选取...

    小程序table组件 满足基本需求

    在微信小程序开发中,`table`组件是一种非常实用的元素,用于展示结构化的数据,如表格形式的数据。本文将深入探讨小程序`table`组件的基本使用方法、特性以及如何通过它来满足各种数据展示的需求。 首先,`table`...

    table标签使用方法

    通过本文的学习,你应该能够熟练掌握`table`标签的基本用法以及如何使用`colspan`和`rowspan`属性来合并单元格,同时也了解了如何使用`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`标签来增强表格的语义性和可访问性。...

    html中table的表格样式

    在HTML中,`&lt;table&gt;`元素是用于创建表格的关键标签,它允许我们组织数据并以结构化的方式展示。本文将深入探讨HTML中的表格样式,包括基本语法、样式控制以及一些高级技巧。 首先,一个基本的表格由多个部分组成,...

    HTML用table写的一个网页,纯table源码

    2. `&lt;tr&gt;`:定义表格行(Table Row),每个数据单元格都位于一行之中。 3. `&lt;th&gt;`:定义表头(Table Header),通常用于展示列名或分类信息,字体通常会加粗并居中。 4. `&lt;td&gt;`:定义表格数据单元格(Table Data ...

    table样式.zip

    3. **文字样式**:通过`font-family`, `font-size`, `font-weight`等属性调整文本的字体、大小和粗细,`text-align`控制文本的水平对齐,`vertical-align`则决定文本在单元格中的垂直位置。 4. **行和列的高亮**:...

    css用ul取代table

    2. **样式控制**:CSS提供了丰富的样式控制手段,如边距、填充、颜色、字体等,使我们能够精确地调整每个单元格或行的样式,而`&lt;table&gt;`的样式通常受限。 3. **语义化**:`&lt;ul&gt;`和`&lt;li&gt;`元素在HTML中具有明确的语义...

    table示例代码

    在`&lt;table&gt;`中,我们可以使用一些属性来控制表格的外观和行为: 1. `border`:设置表格边框的宽度,例如`border="1"`将显示边框。 2. `cellpadding`:设置单元格内部与内容之间的距离。 3. `cellspacing`:设置...

    页面html Table表格导出Execl

    在描述中提到的“合并单元格”和“合并行”,可以通过`colspan`和`rowspan`属性来实现,它们分别控制单元格跨列和跨行的数量。 2. **JavaScript/jQuery操作DOM**:在前端,JavaScript或jQuery库通常用于动态地获取...

    切table排版

    在网页设计和开发中,"切table排版"是一个常见的技术策略,特别是在处理大量数据或者宽幅表格时。当表格内容过于繁多,以至于在有限的屏幕宽度内无法完全显示时,就需要采取措施来优化用户体验。这个过程通常涉及到...

    renren.zip_Table

    `table`元素允许开发者方便地创建二维数据展示,但它的缺点在于不易控制样式和响应式布局,这在现代Web开发中已逐渐被CSS Grid和Flexbox所取代。 关于`table`标签的一些关键知识点包括: 1. **结构元素**:`&lt;table...

    【JavaScript源代码】vue使用el-table动态合并列及行.docx

    在Vue.js中,Element UI库提供了el-table组件,它是一个强大的表格组件,支持多种功能,包括动态合并行和列。本文将深入讲解如何在vue项目中利用el-table实现这一功能。 1. **动态合并行与列的基础** 首先,el-...

    layui-table-merge-master.zip

    layui-table 是layui框架中的表格组件,提供了丰富的功能和高度自定义的选项,使得开发者能够轻松构建各种复杂的表格展示。"layui-table-merge-master.zip" 文件包含了一个关于layui表格行合并的示例或插件,它允许...

    网页设计table表格知识.pdf

    例如,align属性可以设定表格在页面中的对齐方式,而valign属性可以控制文本在单元格中的垂直位置。 4. 单元格合并:在表格设计中,常常需要合并相邻的单元格来实现复杂布局。colspan属性用于水平合并单元格,而...

    CSS display属性的table表格布局

    对于更复杂的表格布局,例如单元格合并,可以使用嵌套的 `display: table` 元素来模拟传统表格的 `colspan` 和 `rowspan` 功能。例如,如果需要合并两行两列,可以创建一个新的 `table-cell` 并将其宽度和高度设置为...

    html2.rar_Table

    在HTML中,表格(Table)是一种非常重要的布局和数据展示工具。`html2.rar_Table`这个压缩包文件显然包含了关于HTML表格的详细资料,可能是手册、教程或者示例代码。虽然压缩包中只列出了一个文件`4-21工作纪要.wps`...

Global site tag (gtag.js) - Google Analytics