zoukankan      html  css  js  c++  java
  • 表格table列宽度控制<colgroup>

    <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>
  • 相关阅读:
    项目中的注意事项
    复合查询
    树型控件的处理(完整版)
    图的存储结构(邻接矩阵)
    图的定义与术语2 数据结构和算法55
    图的存储结构(邻接矩阵)
    赫夫曼编码 数据结构和算法52
    赫夫曼编码 数据结构和算法52
    图的存储结构(邻接矩阵)
    图的定义与术语 数据结构和算法54
  • 原文地址:https://www.cnblogs.com/jerrypro/p/6778089.html
Copyright © 2011-2022 走看看