<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>colgroup</title>

    <style>

        .engine{

            background-color: aquamarine;

        }

    </style>

</head>

<body>

<table border="1">

    <!--列组　-->

    <colgroup>

        <col class="browser">

        <col class="engine" span="2">

    </colgroup>

    <thead>

        <tr>

            <th>浏览器</th>

            <th>渲染引擎</th>

            <th>JavaScript 引擎</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <th>Chrome</th>

            <td>Blink</td>

            <td>V8</td>

        </tr>

        <tr>

            <th>Opera</th>

            <td>Blink</td>

            <td>V8</td>

        </tr>

        <tr>

            <th>Edge</th>

            <td>EdgeHTML</td>

            <td>Chakra</td>

        </tr>

    </tbody>

</table>

</body>

</html>

效果：

table-列组的更多相关文章

  1. 表格table列宽度控制<colgroup>

    <colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化. 通过使用 <colgroup> 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式. ...

  2. table列等宽

    固定table列等宽 固定table列等宽 style: {table-layout : fixed} html: style="table-layout:fixed" js: o ...

  3. 关于如何解决bootstrap table 列 切换 刷新 高度不一样

    在使用bootstrap table时候,碰到bootstrap table 列 切换 刷新 高度不一样的问题,如图所示: 解决这个问题很简单,在你的页头加一句<!DOCTYPE html> ...

  4. bootstrap table 列求和

    <div class="modal fade in" id="_modalDialog" tabindex="1" role=&quo ...

  5. Bootstrap Table列宽拖动的方法

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...

  6. easyui datagrid Column Group 列组、 复杂表头 嵌套表头 组合表头 （转载）

    核心: rowspan:2   //占两行 colspan:3    //占三列 所有的colspan下的二级列表头,统一放在一个数组里. 文章一: 转载来源:https://blog.csdn.ne ...

  7. 动态生成table 列

    table.render({ elem: '#test-table-comelist' ,url: layui.setter.base + 'list/comelist' ,cols: [[]] ,d ...

  8. iview 中table列 一列显示多个数据（后台返回数组显示在列内）

    一.首先出现的是比较复杂的一种情况(多个key) 1.首先页面显示效果如下 2.后台返回数据格式如下: 3.在iview中table的columns中的render函数: 4.具体代码 render: ...

  9. Vue+Element Table 列标红

    效果图 列方法 调用 样式

  10. layui table 列宽百分比显示

    var layer = layui.layer, form = layui.form, table = layui.table; var $ = layui.$; /*select gysmc,zyz ...

随机推荐

  1. linux 安装输入法

    简述 Ubuntu16.04安装完后,和12.04以及14.04都不一样,并没有中文输入功能.于是搜索一些安装中文输入法的方法. 开始安装了ibus pinyin输入法,但是系统重启之后发现有些时候不 ...

  2. Jmeter分布式测试需要注意事项

    Jmeter分布式测试需要注意事项: 1. 如果脚本中有用到CSV Data Set Config,则所有的模拟机都必须在相应的目录下存在该文件.如下图,则必须所有模拟机的F盘下都有user.txt文 ...

  3. Linux下查看CPU使用率 --- top命令的使用

    在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会 ...

  4. JavaScript学习系列4 ----- JavaScript中的扩展运算符 三个点(...)

    在JavaScript中, ES6开始有rest参数 和 三个点扩展运算符 (spread运算符) 我们来看看他们各自的用处 1. rest参数 rest参数的形式为 ...变量名          ...

  5. windows配置换行符

    CR.LF.CR/LF为不同操作系统上使用的换行符: Windows/DOS系统:采用CR/LF表示下一行: Unix/Linux系统:采用LF表示下一行: Mac OS系统:采用CR表示下一行: M ...

  6. C#z中的虚方法，抽象类

    1.虚方法 我在这动物类中定义了一个虚方法 Dosth class Animal { public int Aid; public string Name; public void SetAid(in ...

  7. ASP.NET十分有用的页面间传值方法（转）

    一.目前在ASP.NET中页面传值共有这么几种方式: 1.表单提交,   <form action= "target.aspx" method = "post&qu ...

  8. C# 写 LeetCode Medium #2 Add Two Numbers

    2. Add Two Numbers You are given two non-empty linked lists representing two non-negative integers. ...

  9. 微信小程序open-data获取用户的信息样式设置

    效果图 wxml代码 <view class="userinfo"> <!-- 用户头像 --> <view class="userinfo ...

  10. 创建、配置Servlet

    1.创建Servlet 2.选择继承的类及需要覆盖的方法 3.Servlet结构 package com.sysker.servlet; import java.io.IOException; imp ...