基于colgroup的表格单元格宽度不能同时在两个表格上使用
。colgroup元素用于定义表格列的组合，可以为列分组设置一些共同的属性。但是，colgroup的属性只能应用于当前所属的表格，不能同时应用于其他表格。
具体来说，当一个colgroup元素设置了宽度属性时（如width="100px"），该宽度属性只会作用于当前表格中的列，无法同时作用于其他表格中的列。这是因为colgroup的宽度属性是用于设置所属表格中列的宽度的，不具有跨表格的能力。
因此，如果需要设置多个表格的列宽度，需要分别为每个表格的colgroup元素设置宽度属性。例如，如果有两个表格需要设置列宽度为100px，分别为表格1和表格2，可以分别在两个表格中的colgroup元素上添加width="100px"属性。
对于这个问题，推荐腾讯云的产品腾讯云自助建站（https://cloud.tencent.com/product/cdn）来进行相关的网站构建和维护。腾讯云自助建站提供了丰富的模板和界面设计工具，方便用户快速创建和定制自己的网站。此外，腾讯云自助建站还提供了强大的CDN加速服务，可以有效提升网站的访问速度和稳定性。
相关·内容
1回答
问题：我的两列表的每个表单元格都需要50%宽，但是当有一个单元格表时，一般的单元格规则就不适用了，因为这个表是100%的。我的CSS看起来如下：
.mytable{ width: 100%; }
.mytable tr td { width: 50%; }
我尝试了我能想到的每一个CSS组合，并得到了nada。我为此放弃了CSS。
因此，现在我希望强制我的表呈现两个单元格，即使标记中只有一个单元格。我试着用<colgroup> <col span="2"> </colgroup>来做这件事，但它似乎也不起作用。
问题:当只有两个表格单元格存在
浏览 4提问于2014-10-29得票数 0
回答已采纳
我面临着html表格元素单元格宽度的问题。IE8和IE9中表单元格的宽度不同。请找到下面的代码片段，其中我使用table colgroup设置表格单元格的宽度，并将表格的宽度设置为100%。
Html
<table id="Grid1_Table" class="Table">
<colgroup>
<col style="width:20px">
<col style="width:20px">
<col style="width:1
浏览 1提问于2013-02-20得票数 0
回答已采纳
1回答
表布局是如何固定的？根据17.5.2.1“固定表布局”(来自W3)：
在固定表格布局算法中，每列的宽度确定如下：
1.“宽度”属性的“auto”以外的值的列元素设置该列的宽度。
2.否则，第一行中的单元格具有“宽度”属性的“auto”以外的值，将决定该列的宽度。
我认为，首先我们检查col元素的宽度，如果它被设置为100 of，那么我们就不再使用它了。然而，下面的布局证明我错了。就像浏览器计算MAX(col.width，第一个td.Width)一样。我在这里错过了什么？我是否误解了W3的定义？谢谢
小提琴：
HTML：
<table>
<colgroup&g
浏览 2提问于2015-05-25得票数 3
回答已采纳
4回答
我在我的页面中有一个表格，我使用colgroups以相同的方式格式化该列中的所有单元格，对背景颜色和所有内容都很有效。但似乎找不出文本居中对齐不起作用的原因。它不会将文本居中对齐。
示例：
<table id="myTable" cellspacing="5">
<colgroup id="names"></colgroup>
<colgroup id="col20" class="datacol"></colgroup>
<
浏览 2提问于2009-08-06得票数 70
回答已采纳
1回答
我的问题很容易被证明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<table border="1">
<colgroup>
<col width="75">
<col width="75">
浏览 5提问于2012-09-22得票数 1
我正在尝试使用colgroup的col元素为表格单元格提供最小宽度。table由设置了一定宽度(小于col中设置的所有单元格的组合宽度)的div包装，div的overflow设置为auto。
这是我的html代码-
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.table-block {
border-spacing: 0;
border-collapse: collapse;
}
浏览 2提问于2013-02-19得票数 1
4回答
表格单元格图像和单元格背景图像未显示： <table border="1">
<colgroup>
<col width="150"/>
<col width="350"/>
</colgroup>
<tbody>
<tr>
<td height="100%" width="92%"><image src="../images/refresh.jpg" alt=
浏览 44提问于2017-11-09得票数 0
回答已采纳
对的一个回答指出，colgroup/col应该只在IE中工作。
我已经写了一个例子(见下文)，它可以在IE9 (将单元格内容居中放在第三列)上工作，但不能在最新版本的Chrome上工作。
我做错了什么？
HTML示例：
<html>
<head><title>test table centerring</title></head>
<body>
<table border="1">
<colgroup>
<col/>
浏览 1提问于2012-04-24得票数 5
回答已采纳
2回答
我有一个有x个列的表格，这个表格有一个固定的宽度。
<colgroup>
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
</colgroup>
我希望每列的宽度是基于列数。如果4列，宽度为25%，如果3= 33%，如果2= 50%
有没有办法
浏览 0提问于2012-12-18得票数 0
回答已采纳
1回答
在IE9中使用colgroup not为表单元格设置宽度
<table id="Grid1_Table" class="Table">
<colgroup>
<col style="width:20px">
<col style="width:20px">
<col style="width:180px">
<col style="width:200px">
浏览 3提问于2012-12-20得票数 20
1回答
我需要缩小HTMLTable列的宽度，并在其中包含文本内容。
我试图设置宽度并强制将文本包装的所有内容都失败了。下面是html：
<td width="40" class="skybluebackground centertext"><label class="wrappable"><strong>Total Expenses</strong></label></td>
...other行的单元格类似于该列中的单元格(数字输入元素)：
<td width="40
浏览 2提问于2015-08-27得票数 0
回答已采纳
3回答
如何在表格中显示行
、、、
使用style属性，我想显示表格的单元格边框；
<table class="table-bordered table-striped table">
<colgroup>
<col id="Col1" />
<col id="Col2" />
<col id="Col3" />
<col id="Col4&#
浏览 2提问于2014-01-09得票数 0
我已经成功地创建了具有交替颜色的行组和列组。我试着使用colgroup和tbody，但是放弃了colgroup，col :nth*，因为我不能让它们交替使用行和列。在构建表时，我正在应用类。HTML示例如下：
<table class="syslibblock">
<tr class="rowgroup0">
<TD class="colgroup0">1-1-1</td>
<TD class="colgroup0">1-1-2</td>
浏览 1提问于2015-06-23得票数 0
1回答
考虑以下代码：。
<table class="main">
<colgroup><col class="votes"><col></colgroup>
<tr>
<td>Votes</td>
<td>Comments</td>
</tr>
<tr>
<td>
<p class="vote-desc">Some long name,
浏览 0提问于2014-04-02得票数 5
回答已采纳
2回答
默认情况下，kendo网格将展开以填充其包含的div。它只是一个表格元素，所以从本质上讲。
<table role="grid">
<colgroup>
<col style="width:200px"> // etc
<colgroup>
<thread>
// content
</thread>
</table>
但是，当您添加更多的cols (或者有太多的cols)时，它们会来回缩放以适应需要。我想在overflow上使用水平滚动条。
为此，我添加了一些在开始、添加和重新排
浏览 0提问于2013-01-17得票数 9
回答已采纳
1回答
变杆宽虫
、、、
我试图在ASP.NET中呈现一个树视图，如下所示(JSFiddle )
<table>
<colgroup>
<col width="20" span="2" />
<col width="*" /> // removing this width doesn't change anything
<col width="20" />
</colgroup>
<tr>
浏览 3提问于2012-09-27得票数 0
回答已采纳
我如何使一个表元素水平溢出它的父容器？我想避免设置表格宽度，因为它应该是列的总和。 我正在尝试设置列的宽度，但一旦它们达到父级宽度，它们就不再增长。 下面的代码片段演示了两个具有不同列宽的表，但它们的呈现方式相同。第二个表实际上应该溢出父级。 .container {
width: 300px;
background: #ccc;
overflow: auto;
}
table {
table-layout: fixed;
border-collapse: collapse;
margin-bottom: 10px
}
td,
th {
border: s
浏览 19提问于2020-07-15得票数 3
回答已采纳
我有一个两个单元格的表格水平对齐。这张桌子有一组宽度，大约500px。每次加载页面时，第一个和第二个单元格都会填充不同长度的字符串变量。我想要得到的是单元格1中没有空格左对齐，单元格2和表格边缘之间没有空格。看起来像这样：
[[textfromvariable1][textfromvariable2 ]]
编辑: eli：
现在看起来是这样的：
[[text1][text2 ]
所以第二个单元格没有覆盖整个表格的宽度。
浏览 2提问于2013-06-01得票数 0
回答已采纳
2回答
我在表格中呈现一个表格，标签中的标签(左)和标签中的文本输入(标签的右边)。为了灵活起见，我想编写尽可能少的css，并将所有内容神奇地放置在一起，这样：
单元格展开以容纳最长标签的宽度，右边的字段展开以填充单元格的整个宽度。
我一直在尝试width:100%和width:auto在这些不同元素上的各种组合，但都没有效果。这样做是可能的，还是应该放弃并指定像width:Npx这样的硬宽度
浏览 3提问于2012-06-07得票数 1
我有一个简单的html表格，并一直试图改变特定单元格的字体和颜色，但似乎做不到。
这是我的表，我在这张表上为我的css所拥有的一切都显示出来了。
table,
th,
td {
border: solid;
font-family: Mylius;
font-size: 12px;
}
<table>
<td colspan="3">Baggage allowance</td>
<colgroup>
<col width="800px">
</co
浏览 1提问于2015-11-01得票数 0
回答已采纳
我已经创建了p表与水平和垂直滚动表格使用PrimeNG。它包含更多的行和列。
在这里，我面临着无法自动调整列宽而不是硬编码宽度的挑战。
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width: 200px">
</colgroup>
</ng-template>
下面是代码。
<p-table [columns]=&
浏览 48提问于2018-12-19得票数 0
我想下面的代码会解释这个问题。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
body { padding-bottom: 24px }
table { table-layout: fixed }
<
浏览 4提问于2013-04-23得票数 0
回答已采纳
我试图找到动态设置表列宽度的最佳方法，而不必单独设置每个单元格的宽度。
我有一个表，每个列都应该有一个固定的宽度，而不管内容如何。如果每个单元格都有一个宽度和一个最大宽度设置，这是很好的。但是动态设置是很尴尬的。
我试图使用colgroup和col标记来设置每一列的宽度，但这似乎行不通。
table, th, td {
border: 1px solid black;
}
th, td {
overflow: hidden;
white-space: nowrap;
}
<table>
<colgroup>
<col style=&#
浏览 2提问于2019-10-24得票数 0
回答已采纳
1回答
我正在尝试布局一个HTML表(它是表格数据)，它在Firefox3.5和Chrome2.0.172(编辑和IE7 -它像Chrome一样呈现表)中呈现的方式不同。
我把桌子放在一个div里面：
<div id="listcontainer">
<table class="tasklist">
<colgroup>
<col class="narrow" />
<col class="wide" />
{{ more colu
浏览 2提问于2009-07-04得票数 8
回答已采纳
1回答
我是用纯html返回的普通表格布局，它有4列
<table>
<colgroup span="1" width="20%"/>
<colgroup span="1" width="30%"/>
<colgroup span="1" width="20%"/>
<colgroup span="1" width="30%"/>
<tr>
<td colspan="3"&g
浏览 2提问于2010-11-04得票数 0
希望你做的很好，我发现了你的拖放库，这是如此惊人和有帮助的，但O被困在小问题上，你能帮帮我吗？
以下是问题所在：
当表数据中有较大的项时，它在表格中垂直获取空间，像图像一样，有40 it的高度，然后垂直占据两个表格单元格。
>>图像有70 it的高度，然后垂直占据三个表格单元。
我希望你能理解，这是我当前代码的链接：
提前谢谢
<div id="main-container">
<div id="redips-drag">
<!-- left container --&g
浏览 4提问于2022-08-03得票数 0
2回答
当您将border-collapse: collapse;应用于表格以将其单元格的边框“融合”在一起时，它开始在Javascript中确定表格单元格的宽度时产生问题。例如，请查看此页面：
有两个表格，一个有折叠的边框，另一个没有。如果单击没有折叠边框的行，jQuery的innerWidth和outerWidth函数将报告我期望看到的内容(内容宽度和内容加上边框宽度；没有填充)。
但是，如果单击表中具有折叠边框的行，则会得到浏览器不一致的行为，特别是在clientWidth属性上。在火狐中，clientWidth和width()是一样的。IE和Chrome浏览器的width()要高1个像素，O
浏览 1提问于2012-11-08得票数 14
回答已采纳
摘要
确保表单元格不能小于某个最小宽度的最佳方法是什么？
示例
我希望确保表格中所有单元格的宽度至少为100px。如果有更多可用空间，则表单元格应填充该空间。
浏览器兼容性
我可能想要找到一个在
FF 2-3Safari IE 6-8
按喜好顺序排列。
浏览 43提问于2008-09-11得票数 51
回答已采纳
假设你有一个超文本标记语言表格，它有一个跨多列的<th>单元格，例如
<table>
<tr>
<th colspan="3" scope="?">Scores</th>
<!-- ...more headings here... -->
</tr>
<tr>
<th scope="col">English</th>
<th scope
浏览 3提问于2009-06-07得票数 5
回答已采纳
我正在尝试在Internet Explorer中渐进式地呈现表格。它在Firefox中渐进式渲染-但是在IE中。它将其渲染到内存中，因此表格需要更多的时间才能显示出来。
我在表格中添加了一个固定布局，并设置了一个colgroup/col
下面是代码的样子(我用C#构建它，还利用了引导程序)：
sb.Append("<table class='table table-condensed small table-hover table-bordered' style='table-layout: fixed;'>");
sb.Append
浏览 1提问于2016-04-21得票数 3
我希望在表格的每一列上有不同的样式。我读到过可以通过使用<colgroup>或<col>来做到这一点，但我没有那么幸运。我有一个示例，似乎什么都没有改变。我做错了什么吗？这能在xhtml上工作吗？
我知道我可以在每个类上添加一个“<td>”属性，但这似乎很弱。
浏览 0提问于2010-09-07得票数 37
回答已采纳
我试图创建一个表格来显示一个人的体重指数。
作为其中的一部分，我希望在:hover上也突出显示<tr> 和 <col> (或<colgroup>)，以便使交叉口更加明显。
由于该表将包括公制和帝国测量，因此:悬停不需要停在单元格(从任何方向)，事实上，如果它从一个轴延伸到另一个轴，那将是一个额外的好处。我也在使用XHTML1.1严格的doctype，如果这有区别的话？
所以..。一个例子(真正的桌子.)，但这应具有代表性：
<script>
tr:hover {background-color: #ffa; }
colgroup:hover,
浏览 6提问于2009-05-11得票数 39
回答已采纳
jQuery中的.width()、jQuery中的.css('width')和节点上的.style.width属性返回的值有什么不同？
我很好奇，因为在尝试将两个表格单元格的宽度设置为相等时，前两个单元格给出了相同的错误答案。它们实际测量的是什么，为什么它与我在浏览器中查看元素时在.style属性中看到的值不同？
浏览 0提问于2013-07-06得票数 12
下面表格的第一个单元格的宽度是其他单元格的1px。在Firefox中可以，但在Chrome和IE中就不行了。这似乎与表单元格上的table-layout:fixed、border-collapse:collapse和border的组合有关。
<div style="border:1px red dotted;">
<table style="border-collapse: collapse; table-layout:fixed; border-spacing: 0;">
<colgroup>
<
浏览 13提问于2017-02-16得票数 0
1回答
我试图在html5中创建表格数据:我非常熟悉(X)HTML中的表，并且非常喜欢用<colgroup> <col width=?>指定列宽的方法，但我知道在html5中使用colgroup是过时的。方法是使用CSS。对于小型桌子来说，这不是问题。我的问题是我的表很大，有上百行。为每个<td>指定一个类或样式，大多数情况下都会导致html代码的大小激增，还可能导致性能问题。
在html5中，在较大的a表上有效地指定列宽度和文本的正确方法是什么？
浏览 3提问于2015-03-27得票数 0
回答已采纳
我想有一个具有水平和垂直滚动条的表格。当我们的表格不使用rtl方向时，primeNg中的showcase可以正常工作！
当我们使用水平滚动和rtl方向滚动时，不能在表格标题上滚动！当我们在rtl目录中使用时，表头是固定的
mycode：
<div dir="rtl">
<p-table dir="rtl" #dt
[columns]="cols"
[value]="cars"
[paginator]="true"
浏览 0提问于2018-11-04得票数 1
2回答
我有两个div。一个div包含表内容，另一个包含纯文本。我切换了两个div的内容。所有的浏览器在交换后都能很好地处理表格的样式，除了一个android浏览器，它完全忽略了表格的样式，并使td单元格的宽度非常宽。
<div id="div1_id">Pure Text Content</div>
<div id="div2_id>
<table width="3000" border="0" cellspacing="0" cellpaddin
浏览 2提问于2015-03-09得票数 0
我必须在html-table中显示数字，并希望将它们向右对齐，但需要将数字放在单元格的左侧，如下所示：
Header A |Header B |
-1 |5000 |
1 | -20 |
100 | 1 |
列的宽度是动态的，字体类似Arial。我不能更改html (div，colgroup，..)中的任何内容，也不能使用Javascript，只能将CSS类附加到td。
我尝试使用calc(100% - 25px)，但不幸的是，100%是表的宽度，而不是列的宽度。
请看我这里的例子： (我在那里放了50px的填充)
浏览 1提问于2018-11-07得票数 0
Ie9.0不能正确显示以下HTML，我没有想法.请帮帮忙。I不能更改"< !DOCTYPE >“。有什么主意吗?谢谢。
<!DOCTYPE html>
<html lang="en">
<body>
<table style="table-layout:fixed;" width="100%" border="1">
<colgroup span="120">
</colgroup>
<tbod
浏览 9提问于2012-11-23得票数 0
我有一个显示新闻的桌面视图。每个UITableview单元格中都有一个UICollectionview。此外，在集合视图单元格中会有一些图像，单元格的数量不能固定，因为新闻可能包含一个图像，两个或更多图像。UITableview单元格的结构如下所示：
xxxxxxxxxxxxxxxxxx
名字
新闻信息
(UICollectionview img1 img2...)
UIButton和UILabel (如like、dislike、COMMENT.)
xxxxxxxxxxxxxxxxx
我还设置了约束条件。并且我必须为UICollectionview设置宽度属性。主要的问题是，无论我有多少新闻图
浏览 0提问于2016-04-22得票数 0
2回答
我正在尝试有一个图像坐在一些文本旁边。文本需要坐在图像的一半垂直位置
[IMG]
[IMG] Here is the text
[IMG]
我得到了以下结果，因为两个单元格div的宽度相等，而不是匹配内容宽度：
[IMG]
[IMG] Here is the text
[IMG]
代码是预先存在的。有一个表容器div：
.vertical-align-container {
display: table;
table-layout: auto;
width: 100%;
}
和两个表单元格div：
.vert
浏览 8提问于2018-01-20得票数 1
回答已采纳
2回答
自从我升级到IE10后，我的网页上的表格不能正确显示。下面是示例：
表格的标题部分显示正确，但似乎整个表格放在一个(左)列或单元格中。
我寻找了解决方案，但我还没有找到任何有用的东西。
代码如下：
<table class="class" id="id">
<colgroup>
<col width="" style="display:none;" />
<col width="190" />
<col width="160" /&g
浏览 0提问于2013-04-05得票数 1
回答已采纳
1回答
我正在尝试编写脚本来更改悬停时表列和行的样式。当我在页面中有一个表时，这个脚本可以工作，但对其他表不起作用。我知道我需要用.price_table类抓取所有的表，但我是jQuery新手，请帮助我
$(function() {
$(".price_table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
$(this).parent().addClass("hove
浏览 3提问于2015-12-21得票数 0
1回答
我有一张有桌子格的桌子。在这些表格单元格中，我想显示一个绝对定位的div。div有一个固定的顶部和底部，我希望它显示在表格单元格的中心。到目前为止，我的代码如下：
table {
width: 100%;
border: 1px solid;
height: 200px;
table-layout: fixed;
}
table td {
position: relative;
border: 1px solid
}
div {
position: absolute;
top: 20%;
bottom: 30%;
border: 1px solid;
浏览 5提问于2015-03-13得票数 2
回答已采纳
最近，我偶然发现了Nikhil Krishnan制作的这支漂亮的钢笔：
如你所见，固定的头表是用一个很好的CSS样式实现的，而且不涉及JS：
// '.tbl-content' consumed little space for vertical scrollbar, scrollbar width depend on browser/os/platfrom. Here calculate the scollbar width .
$(window).on("load resize ", function() {
var scrollWidth = $(&
浏览 20提问于2016-08-18得票数 2
我有一个只有几行和循环头的表。列的数目不是固定的，可以更改。标头是横跨整个表的单个单元格。当从表中删除列时，标题宽度不会重新计算，并且超过表的宽度。如何用尽可能少的代码将标题包含在表中。如果可能的话，我宁愿不使用JS。
我重新创建了问题。
<table>
<colgroup>
<col style="width:10px">
<col style="width:20px">
<col style="width:30px">
浏览 5提问于2014-05-06得票数 0
回答已采纳
1回答
在HTML5中对齐表列组中的文本
、、、、
我试图在表中的列组中对齐(中间)内容。我了解了colgroup和col元素(以前从未使用过)。我已经了解到这些元素都有align属性，但是现在，在HTML中，它已经消失了。
在w3school服务上，我看到了这样的注释：
兼容性说明
在HTML5中不支持对齐属性。使用CSS代替。
CSS语法：<td style="text-align:right">
这是否意味着，除了删除列/列组的对齐特性之外，现在我还必须在列中的每个单元格上添加样式/类元素？那时可以使用什么col和colgroup元素？我已经看到设置background-color仍然有效。还要别的吗？
浏览 2提问于2018-11-23得票数 2
回答已采纳
这是为表格中第一列的单元格指定边框的正确方式吗？
$(gridContentTable).find("tbody tr td[cellIndex=" + (frozenColCount - 1) + "]").css("border-right", freezeColStyle);
编辑:更多信息：
这适用于标题中的第一个单元格：
$(tableHeaderCol).eq((frozenColCount - 1)).css("border-right", freezeColStyle);
我用下面的代码定义变量：
function
浏览 0提问于2012-07-18得票数 0
回答已采纳
我有一个reStructuredText表，其行如下：
+------+-----------------------------+
| Mask | The bit mask: |
| | [bit 0] Description of bit0 |
| | [bit 1] And bit1 |
+------+-----------------------------+
Sphinx (以HTML为例)生成的单元格如下：
<td><p>The bit mask:
[bit 0] Descriptio
浏览 1提问于2021-01-18得票数 1
回答已采纳
我有一个有三列的表格。我使用标记来指定列的宽度。示例代码：
<table width="100%" border="1">
<colgroup style="background-color:#FF0000;">
<col width="100px" id="id1"></col>
<col width="80px" id="id2"></col><col id="id3">
浏览 0提问于2012-02-02得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
