<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. Cocos2d-x模版卸载及安装

    卸载:将隐藏的模板文件删除掉 首先打开你mac终端,然后输入如下命令:显示Mac隐藏文件的命令:defaults write com.apple.finder AppleShowAllFiles -b ...

  2. C中入栈顺序和运算顺序有关系吗？

    如下代码会怎么执行? printf( "%c,%c,%c\n", getchar(), getchar(), getchar() ); 实际测试,是倒序执行,感觉上符合“C函数的形 ...

  3. OpenCV_基于局部自适应阈值的图像二值化

    在图像处理应用中二值化操作是一个很常用的处理方式,例如零器件图片的处理.文本图片和验证码图片中字符的提取.车牌识别中的字符分割,以及视频图像中的运动目标检测中的前景分割,等等. 较为常用的图像二值化方 ...

  4. par函数pch参数-控制点的形状

    pch函数用来控制点的形状,这个参数不仅在par函数中有,在大多数的高级绘图函数中都有. 代码示例: plot(rep(1:5, times = 5), rep(5:1, each = 5), pch ...

  5. 《C++ Without Fear》 第1章 第一个C++程序

    机器码,CPU的“母语”,每条计算机指令就是一个由1和0构成的独一无二的组合(或代码). endl是“endl line”的缩写,所以它应该念作“end ELL”而不是“end ONE”.

  6. IIS 使用多个https和通配证书解决方案

    环境:OS :WINDOWS 2008 IIS: IIS7 域名:三个二级域名 问题:由于一个网站只支持一个443,但可以通过更改配置得到绑定不同域名.但由于公用证书,所以问题出来.只能为一个二级域名 ...

  7. delegate、Func、Action几个常用手法

    委托是我们C#开发当中使用频率非常的高一个手段,好处我就不列举了. 委托早期版本中只有delegate,后期版本有了Func(有返回值)和Action(无返回值)两委托方法. 我这里将列举它们三个常用 ...

  8. 关于 MVVMLight 设计模式系列

    MVVM设计模式你可以在WPF.Silverlight.Windows Phone开发中使用,我想至今已经有非常非常多的朋友正在使用MVVM设计模式,尤其是MVVMLight . 本系列文章以WPF举 ...

  9. 【SSH进阶之路】Hibernate映射——一对一双向关联映射（六）

    上篇博文[SSH进阶之路]Hibernate映射--一对一单向关联映射(五),我们介绍了一对一的单向关联映射,单向是指仅仅能从人(Person)这端载入身份证端(IdCard),可是反过来.不能从身份 ...

  10. day21<IO流+&FIle递归>

    IO流(字符流FileReader) IO流(字符流FileWriter) IO流(字符流的拷贝) IO流(什么情况下使用字符流) IO流(字符流是否可以拷贝非纯文本的文件) IO流(自定义字符数组的 ...