<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。

通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。

注释：只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。

提示：如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。

属性

属性 值 描述
align left
right
center
justify
char		 HTML5 不支持。规定在列组合中内容的水平对齐方式。
char character HTML5 不支持。规定根据哪个字符来对齐列组中的内容。
charoff number HTML5 不支持。规定第一个对齐字符的偏移量。
span number 规定列组应该横跨的列数。
valign top
middle
bottom
baseline		 HTML5 不支持。定义在列组合中内容的垂直对齐方式。
width pixels
%
relative_length		 HTML5 不支持。规定列组合的宽度。

要让colgroup的col设置的百分比生效，前提市在talbe上面设置 width="100%";

示例

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

</head>

<body>

<table border="1" width="100%">

  <colgroup>

    <col width="40%">

    <col width="50%">

      <col width="10%">

  </colgroup>

  <tr>

    <th>ISBN</th>

    <th>Title</th>

    <th>Price</th>

  </tr>

  <tr>

    <td>3476896</td>

    <td>My first HTML</td>

    <td>$53</td>

  </tr>

  <tr>

    <td>5869207</td>

    <td>My first CSS</td>

    <td>$49</td>

  </tr>

</table>

</body>

</html>

表格table列宽度控制<colgroup>的更多相关文章

  1. 表格table的宽度问题

    首先注意table的一个样式 table { table-layout:fixed; } table-layout有以下取值: automatic 默认.列宽度由单元格内容设定 fixed 列宽由表格 ...

  2. html - table 表格不被撑开，td某些列宽度固定某些列自适应

    table-layout 属性的解释:http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 1,实现table细边框,设置如下css: t ...

  3. HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>

    <table>标签: 定义和用法: <table>标签定义HTML表格. 简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...

  4. jQuery拖动调整表格列宽度-resizableColumns

    实现鼠标可拖动调整表格列宽度 如图: 一.引入文件: <script src="/js/jquery-1.8.0.min.js" type="text/javasc ...

  5. colgroup中col定义表格单元格宽度

    colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...

  6. jquery可拖动表格调整列格子的宽度大小(转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. layui静态表格固定td宽度,table固定td宽度

    正在做一个项目,要求数据表的列是不固定的,有可能是有10列,有可能是20列,第一列宽度要固定,然后我怎么设置都没有用, 这个问题困扰了我三天,后来终于百度到了, 这个博客: https://www.c ...

  8. vue中获取滚动table的可视页面宽度，调整表头与列对齐(每列宽度不都相同)

    mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => ...

  9. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

随机推荐

  1. 【转】【MySql】Update批量更新与批量更新多条记录的不同值实现方法

    批量更新 mysql更新语句很简单,更新一条数据的某个字段,一般这样写: UPDATE mytable SET myfield = 'value' WHERE other_field = 'other ...

  2. 严格控制GOTO语句

    注意事项 1,使用顺序.选择.循环等有限的基本结构表示程序逻辑. 2,选用的控制结构只准许有一个入口和一个出口 3,程序语句组成容易识别的块,每块只有一个入口和一个出口. 4,复杂结构应该用基本控制结 ...

  3. The request lifetime scope cannot be created because the HttpContext is not available

    项目中应用了Autofac,在Global轮询处理Job的时候,需要获取现有得Service,而这些Service已经通过Autofac进行了配置,所以理所应当的用下面的代码去获取了. Depende ...

  4. (转)MFC鼠标单击消息拦截双击消息

    如果LButtonDown和LButtonDblClk同时有实现的话 总会实现单击消息,在网上找解决方法,思想是在单击消息实现中取时间,计算两次单击事件的时间差 来回尝试修改,最后成这个样子,还算简单 ...

  5. R语言barplot绘图函数

    barplot 函数用于绘制柱状图,下面对其常用的参数进行一个详细的解释: 1)height : 高度,通过这个参数可以指定要画多少个柱子以及每个柱子的高度,其值有两种格式, 第一种 :向量 vect ...

  6. VirtualBox 配置虚拟网卡(桥接),实现主机-虚拟机网络互通

    记录下VirtualBox 配置虚拟网卡(桥接),实现主机-虚拟机网络互通过程,网上搜出来的比较乱,讲的不明不白,因此根据自己弄过一次,确认可行的方式,做个备份,方便日后查阅. 环境: 在Oracle ...

  7. 【转载】Redhat5和6 YUM源配置的区别

    Redhat5和6 YUM源配置的区别  一.概述    随着各个软件版本的不断升级,我们需要掌握的软件特性也越来越多,技术的不断更新也促进了我们脑细胞的循环. 今天在配置RedHat6.3的yum源 ...

  8. 发布订阅者模式之C#委托实现

    1                                                                                                    ...

  9. php开n次方

    php有开平方函数 sqrt,但没开n次方的函数 网上用根据什么数字原理,可用次方(pow)弄开方,格式为:pow(number, 1/ 开方数) 例如: 4的开平方,可以写成 pow(4, 1/2) ...

  10. kafka原理

    今天因为工作接触kafka,先说说kafka是干嘛的. kafka: 说简单点他就是一个基于分布式的消息发布-订阅系统. 然后再理解一些专有名词: Kafka 专用术语 Broker:Kafka 集群 ...