表格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>
表格table列宽度控制<colgroup>的更多相关文章
- 表格table的宽度问题
首先注意table的一个样式 table { table-layout:fixed; } table-layout有以下取值: automatic 默认.列宽度由单元格内容设定 fixed 列宽由表格 ...
- html - table 表格不被撑开,td某些列宽度固定某些列自适应
table-layout 属性的解释:http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 1,实现table细边框,设置如下css: t ...
- HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>
<table>标签: 定义和用法: <table>标签定义HTML表格. 简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...
- jQuery拖动调整表格列宽度-resizableColumns
实现鼠标可拖动调整表格列宽度 如图: 一.引入文件: <script src="/js/jquery-1.8.0.min.js" type="text/javasc ...
- colgroup中col定义表格单元格宽度
colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...
- jquery可拖动表格调整列格子的宽度大小(转)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- layui静态表格固定td宽度,table固定td宽度
正在做一个项目,要求数据表的列是不固定的,有可能是有10列,有可能是20列,第一列宽度要固定,然后我怎么设置都没有用, 这个问题困扰了我三天,后来终于百度到了, 这个博客: https://www.c ...
- vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同)
mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => ...
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
随机推荐
- Python版本,pip版本手动管理
http://blog.csdn.net/jiandanjinxin/article/details/53175121
- e575. The Quintessential Drawing Program
To draw on the screen, it is first necessary to subclass a JComponent and override its paint() metho ...
- e558. 在Applet中多图片交互显示
This is the simplest applet to animate an array of images. In practice, you should use double-buffer ...
- Zookeeper 工作流
一旦ZooKeeper集合启动,它将等待客户端连接.客户端将连接到ZooKeeper集合中的一个节点.它可以是leader或follower节点.一旦客户端被连接,节点将向特定客户端分配会话ID并向该 ...
- 初涉RxAndroid结合Glide实现多图片载入操作
转载请注明出处:王亟亟的大牛之路 本来周末就想发了然后各种拖拉就没有然后了,那么就今天早上写吧,废话不多開始正题 什么是RxJava或者RxAndroid我就不多废话了,理论知识一大堆人给我们做好了. ...
- 如何研究某个gene的ceRNA 网络
研究人员针对 PTEN 这个关键的抑癌基因,来探究调控该基因表达的ceRNA 网络: 分析策略: 1)预测能调控该基因的miRNAs 通过miRanda 软件预测和实验验证相结合的方式,挑选出 miR ...
- chrome 版本升级到56,报错Your connection is not private NET::ERR_CERT_WEAK_SIGNATURE_ALGORITHM
ubuntu14.04 解决方法: $ sudo apt-get install libnss3-1d ref: http://stackoverflow.com/questions/42085055 ...
- 未能在当前目标框架中解析主引用“System.Net.Http”,它是一个框架程序集。“.NETFramework,Version=v4.0”。若要解决此问题,请移除引用“System.Net.Http”,或将应用程序的目标重新指向包含“System.Net.Http”的框架版本。 Zephyr.Web
解决方法:升级项目到.net framework 4.5
- openal 基础知识2
三枚举扩展包(enumeration extension,“ALC_ENUMERATION_EXT”) 开发者可以通过这个extension得到一个字符串列表,区分不同的渲染/捕捉设备.OpenALr ...
- MathType有哪些功能
随着寒流呼呼来临,期末考也不放过我们,不知道你们是在题海里遨游,还是已做好了挑战准备呢.不管你是哪种情况,现在就有一款玩转理工科的强大编辑公式强悍来袭,不管你是学生.教师,还是理科专业工作者,Math ...