<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. thinkphp openfire 添加用户 骨架

    public function addadd(){ header("Content-Type:text/html; charset=utf-8"); $user=$_POST['n ...

  2. 【转】【C++】__stdcall、__cdcel和__fastcall三者的区别

    __stdcall.__cdecl和__fastcall是三种函数调用协议,函数调用协议会影响函数参数的入栈方式.栈内数据的清除方式.编译器函数名的修饰规则等.如下图所示,可以在IDE环境中设定所有函 ...

  3. matlab中常用见的小知识点

    矩阵相关: 在matlab中,矩阵或向量是 column-major 表示形式.用 [] 来构建向量或矩阵, 用()来引用向量或矩阵中的元素:用:表示矩阵中的该index下的所以元素: matlab中 ...

  4. 静态库lib

    步骤: 按普通方式编程,无需export 其中静态库就是中间文件,跟obj文件类似. 静态库的使用不太方便: 如果该静态库是vs2008编译的,那么APP也得用vs2008编译,版本必须一致.且编译方 ...

  5. e664. 在图像中获取子图像

    // From an Image image = createImage(new FilteredImageSource(image.getSource(), new CropImageFilter( ...

  6. 好的API设计

    [非原创,原文链接] API设计书籍下载: 1.keynote.pdf 2.api-design.pdf 最近在重构公司的一个交互中间件,在重新设计API及总体架构的时候思考了许多, 不禁萌发了一个疑 ...

  7. python不同package下相互调用

    路径如: /path/dir1/a.py /path/dir2/b.py 调用举例如: 在/path/dir2/b.py中调用 a模块 import sys sys.path.append(" ...

  8. jQuery-替换和删除元素

    1.replaceWith方法 用提供的内容替换集合中所有匹配的元素并且返回被替换元素的集合 参数类型说明: 1)普通字符串(可包含各种html标签) 2)jQuery对象 ①使用$函数创建的新元素( ...

  9. Word公式装逼技巧，你绝对不会！

    Word论文排版是非常有技术含量的.只是纯文本格式时都有很多技巧,累倒一群人,更不用说还加上有数学公式了.有数学公式也就算了,问题是公式排版更是难上加难.想要在人前装逼一把?没有这些技巧你是绝对不行的 ...

  10. python2.0_day19_充分使用Django_form实现前端操作后台数据库

    在前面的<python2.0_day19_学员管理系统之前端用户交互系统>一节中,我们实现了前端展示customer客户纪录.在<python2.0_day19_前端分页功能的实现& ...