现在已经弃用了colgroup _ col _ width属性，有没有其他方法可以替代它呢？
colgroup 和 col 元素及其 width 属性在 HTML5 中已被弃用，因为它们不符合语义化和结构化的原则。不过，如果你需要实现类似的列宽控制，可以考虑以下几种替代方法：
1. 使用 CSS Flexbox
Flexbox 是一种强大的布局工具，可以轻松地控制元素的宽度。
<div class="table">
<div class="row">
<div class="cell" style="flex: 1;">Column 1</div>
<div class="cell" style="flex: 2;">Column 2</div>
<div class="cell" style="flex: 1;">Column 3</div>
</div>
</div>.table {
display: flex;
flex-direction: column;
}
.row {
display: flex;
}
.cell {
border: 1px solid black;
padding: 10px;
}2. 使用 CSS Grid
CSS Grid 是另一种强大的布局工具，特别适用于二维布局。
<div class="table">
<div class="row">
<div class="cell">Column 1</div>
<div class="cell">Column 2</div>
<div class="cell">Column 3</div>
</div>
</div>.table {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 1 part, 2 parts, 1 part */
}
.cell {
border: 1px solid black;
padding: 10px;
}3. 使用 CSS Table Layout
如果你需要一个类似表格的布局，可以使用 table-layout 属性。
<table style="width: 100%; table-layout: fixed;">
<tr>
<td style="width: 33%;">Column 1</td>
<td style="width: 67%;">Column 2</td>
</tr>
</table>4. 使用 JavaScript 动态设置宽度
如果你需要更复杂的宽度控制，可以使用 JavaScript 来动态设置元素的宽度。
<div id="table">
<div class="row">
<div class="cell" id="cell1">Column 1</div>
<div class="cell" id="cell2">Column 2</div>
<div class="cell" id="cell3">Column 3</div>
</div>
</div>document.getElementById('cell1').style.width = '33%';
document.getElementById('cell2').style.width = '67%';总结
- Flexbox 和 CSS Grid 是现代布局的首选工具，提供了灵活且强大的布局能力。
- CSS Table Layout 适用于需要传统表格布局的场景。
- JavaScript 可以用于更复杂的动态宽度控制。
选择哪种方法取决于你的具体需求和项目的复杂性。对于大多数现代网页设计，Flexbox 和 CSS Grid 是推荐的选择。
相关·内容
1回答
如果需要，我会将列隐藏在表中。我在a-标记中使用了style="display:none“。
它起了一段时间的作用，但实际上已经不起作用了.
示例代码：
<table width="100%">
<colgroup>
<col width="auto">
<col width="auto">
<col width="auto">
<col width="auto" sty
浏览 4提问于2014-11-06得票数 0
回答已采纳
我想通过colgroup定义cols的宽度。此外，tbody应该是可滚动的。但是is不起作用。有没有没有js的解决方案？
HTML
<colgroup>
<col span="1" style="width: 15%;">
<col span="1" style="width: 40%;">
<col span="1" style="width: 20%;">
<col span=
浏览 0提问于2016-12-02得票数 2
我正在尝试在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
MDN page on colgroup指示不推荐使用列宽度，但是当涉及到colspan时，我没有找到替代方法，并且需要指定"colspanned“列的宽度。 下面是一个相当简约的代码片段，用于说明具有三列和两行的表。中间的列从来没有用"td“元素来解释。 使用colgroup，可以指定它的宽度，然后一切都很好。如果没有colgroup，HTML呈现引擎将无法求解方程，并且列宽呈现不正确。 table {
border-collapse: collapse;
}
.w100 { width: 100px; background-color: red }
浏览 99提问于2021-05-11得票数 0
回答已采纳
在internet explorer 8中，第二个空白colgroup不断被添加到我的DOM中，这在我的代码中并不存在，它一直在抛出我的表格的宽度。以前有没有人见过这个？
<COLGROUP>
<COL>
<COL>
<COL>
<COL>
<COL>
<COL>
</COLGROUP>
<COLGROUP>
<COL style="WIDTH: 15%">
<COL style="WIDTH: 35%">
<COL styl
浏览 0提问于2014-01-30得票数 0
我有一个HTML表，它的数据来自数据库。目前，数据是从中心而不是顶部填充的。如下所示：
看一下下面的HTML
<table style="width: 100%; height: 550px; text-align: center" border="1" runat="server"
id="tbl1Details">
<colgroup>
<col width="5%" />
<col width="45%
浏览 57提问于2016-01-30得票数 2
回答已采纳
我尝试使用colgroup为表的每一列提供宽度，但它不使用effect.the示例代码
<table>
<colgroup width="100%">
<col style="width: 5%; background-color: red">
<col style="width: 15%;">
<col style="width: 25%;">
<col style="width: 20%;&
浏览 2提问于2017-02-01得票数 3
1回答
我想知道宽度属性和样式的宽度属性之间是否有区别，以便在HTML中定义表的colgroup中列的大小
<colgroup>
<col width="15" />
</colgroup>
<colgroup>
<col style="width:15px;" />
</colgroup>
我必须标准化许多页面，但是我想知道它们之间是否有特定的区别，html支持，浏览器之间的性能或兼容性吗？
浏览 4提问于2014-02-20得票数 0
回答已采纳
2回答
该表的列宽为59px和100px，尽管50px和100px是指定的列宽。
table {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
col:first-child {
width: 50px;
}
col:nth-child(2) {
width: 100px;
}
td, th {
border: 1px solid black;
}
<table>
<colgroup>
<col>
<col>
浏览 0提问于2018-08-14得票数 4
4回答
我在我的页面中有一个表格，我使用colgroups以相同的方式格式化该列中的所有单元格，对背景颜色和所有内容都很有效。但似乎找不出文本居中对齐不起作用的原因。它不会将文本居中对齐。
示例：
<table id="myTable" cellspacing="5">
<colgroup id="names"></colgroup>
<colgroup id="col20" class="datacol"></colgroup>
<
浏览 2提问于2009-08-06得票数 70
回答已采纳
1回答
我正在尝试使用<col width="NUMBER">捕获所有出现的preg_match_all。我可以在没有新线路的情况下工作，但不能和他们一起工作。我在最后使用了/s修饰符，但没有使用。
注意，最初我只能返回第一个事件，但是我发现我可以使用一个断言，它给出了使用(?=<col width=[^>](.*)>)的所有事件
// without newlines in text, it finds 88 and 573
$text = '<table><colgroup><col width="
浏览 1提问于2015-02-19得票数 1
回答已采纳
下面有一组元素，我想找到组的<colgroup>。
<colgroup>
<col width="2184"></col>
<col width="3743">
<col width="3743">
</colgroup>
<colgroup>
<col width="2184">
<col widcth="3743">
<col width="3743
浏览 0提问于2018-09-14得票数 1
回答已采纳
我有一个html代码，并使用String Builder创建一个表，我在.cs文件中使用了这个。在下面的换行字符串中，colgroup部分不能工作。
StringBuilder sb = new StringBuilder();
sb.Append("<table style=\"border-collapse:collapse;width:100 %;\"border=\"1"><colgroup><col style=\"width:50 %;\"><col style=\"
浏览 4提问于2022-07-02得票数 1
回答已采纳
1回答
我目前实现的材料UI表是将所有元素的厚度设置为1像素。这会导致在两个细胞接触的区域出现略厚的外观，而不是外围。 如何获得1px的均匀边框宽度？ <Table border={1}>
<colgroup>
<col style={{width:'12.5%'}} />
<col style={{width:'12.5%'}} />
<col style={{width:'50%'}} />
<col style
浏览 14提问于2020-04-10得票数 0
1回答
我有以下代码：
$DOMDocument = @DOMImplementation::createDocument(null, 'html');
$width = array(200, 700);
$colgroup = $DOMDocument->createElement('colgroup');
foreach($width as $key => $width) {
$precentageWidth = round(($width*100)/array_sum($width));
$col = $DOMDocument-&g
浏览 0提问于2014-07-02得票数 0
回答已采纳
1回答
不知何故，这是一个简单的问题，我的TD不会被渲染的把手。
我的车把：
<table class="defaultTable" style="width:90mm;">
<colgroup>
{{#each cols}}
<col style="width:{{this.width}}mm;">
{{/each}}
</colgroup>
<tbody>
{{#each rows}}
<tr&g
浏览 5提问于2017-12-21得票数 0
3回答
JSP中的焦点下拉菜单
、、、、
嗨，我对JSP/Jquery/Javascript还不太熟悉。我现在正在学习struts。在我的jsp文件中，我需要专注于页面的drop-down list加载/每次页面加载时，我都是这样做的：
<script type="text/javascript">
$(document).ready(function(){
$("#fault").focus();
});
</script>
然后在我的body中，我使用了html标记：
<body onload="makeDisableE
浏览 2提问于2013-01-03得票数 3
回答已采纳
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回答
表布局是如何固定的？根据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
回答已采纳
1回答
我有一个有四列的表。第一列需要是最小的大小，以适应内容，其他三列需要相等的大小，并消耗表中的其余空间。我的表和我的内容都不是已知大小。(这是一个非常标准的可变大小标签和固定大小的数据布局。)
在HTML4的好日子里，我可以通过使用“相对大小”功能来指定每一列的大小作为整体的比例来做到这一点：
<colgroup>
<col width="0*"/>
<col width="1*"/>
<col width="1*"/>
<col width="1*"/>
浏览 0提问于2012-11-19得票数 8
我有两张桌子。列组设置(百分比)在第一个表中有效，但在第二个表中无效。我不知道为什么会有这样的不同。有没有人知道为什么这不起作用？我已经比较过很多次了，一定是忽略了什么。我不能在没有添加更多评论的情况下发表帖子，但这只是一个简单的问题。我会继续添加，直到它让我发帖或不发帖。 <p>This example shows a colgroup that has three columns of different widths:</p>
<table id="table1" border="1" style="width
浏览 32提问于2021-01-30得票数 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
回答已采纳
出于某种奇怪的原因，IE忽略了我的列宽，只是将所有六列都设置为相等的宽度。
table{
table-layout: fixed;
}
<colgroup>
<col style="width: 15%;" />
<col style="width: 40%;"/>
<col style="width: 5%;" />
<col style="width: 10%;" />
<col
浏览 0提问于2014-01-30得票数 0
是否可以根据表标签中的col width标签数量添加“td”标签。如果有两个td，那么它应该添加2个"col width“。&如果有3，那么，3 "col width“。诸若此类。
<!DOCTYPE html>
<html>
<head>
<title>HTML colgroup Tag</title>
</head>
<body>
<p>This example shows a colgroup that has three columns of di
浏览 4提问于2015-07-06得票数 0
回答已采纳
4回答
<table>
<colgroup>
<col style="color: green"/>
<col style="background-color:green"/>
<col class="char"/>
</colgroup>
<tr>
<th>
Decimal
</th>
<th&
浏览 1提问于2018-07-21得票数 4
回答已采纳
1回答
在座的任何人能告诉我如何用彼此独立的单元格而不是行来制作列吗？
table, tr, td {
background-color:red;
border: 1px solid black;
}
<table width="100%" >
<colgroup>
<col width="15%">
<col width="15%">
<col width="25%">
<col width=&
浏览 0提问于2020-07-22得票数 0
3回答
不会将类应用于表的列
、、、
我对col的理解是，它可以用来为表的列中的所有元素指示一个类。不过，这似乎对我不起作用。我可以将这个类应用于单独的td，但我希望col能帮助我避免这种情况。
下面是html头文件：
<head>
<style type="text/css">
.slick {
background-color:#b0c4de; /*This always works*/
border-style:solid; /*This doesn't work when only applied to a <col>*/
border-width:
浏览 1提问于2010-10-05得票数 3
回答已采纳
我正在尝试用HTML创建一个表(它是新的)。
在中间有一个标题和子标题，但当我在表中创建表时，它的边框会出现对齐。
此外，票证状态单元格的边框应该与三个单元格(待定、取消、总计)匹配，但边框不相应地对齐。
您可以检查下面的检查代码，以获得更多的澄清，也可以篡改，以便立即查看外观和感觉的边界。
有谁能帮我解决这个问题吗。
以下是代码：
<div>
<table border="1" style="width: 100%;">
<colgroup>
<col width="30%"&g
浏览 4提问于2015-06-03得票数 1
回答已采纳
3回答
提取表中的行
、、
这就是结构。在我的项目中，我有很多这样的 <div class="extra">。
<div class="extra">
<table width="90%">
<colgroup>
<col width="40%"/>
<col width="30%"/>
<col width="30%"/>
</colgroup>
浏览 4提问于2013-06-25得票数 0
回答已采纳
3回答
我使用了两个不同的表，它们的类名相同，放在不同的div中，如下面的代码片段所示。
代码片段：
<div>
<div class="gridheader scrollcss">
<div>
<table class="table" style="position: relative;" cellspacing="0">
<colgroup>
<co
浏览 4提问于2013-11-23得票数 1
我在一个具有样式属性的5列表上测试<colgroup>标记。
我似乎不能让它在Firefox3.6/Chrome5tho上工作，这就是我开始在w3c上搜索参考资料的时候。
我的代码看起来完全没问题，但是看着，我发现它甚至都不能工作。只有IE8才能正常工作，Opera10.51忽略了style标签，但正确地应用了align标签，而ffox和chrome似乎完全忽略了colgroup。
那么我(和w3c)做错了什么呢？colgroup被弃用了吗?我错过了吗？
浏览 0提问于2010-04-19得票数 2
回答已采纳
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
回答已采纳
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
回答已采纳
我有一个带有标记的表，如下所示
<table>
<colgroup>
<col span="1" width="120px" />
<col span="1" width="230px" />
<col span="1" width="230px" />
<col span="1" width="230px" />
</colgroup>
<thead>...</th
浏览 7提问于2014-05-19得票数 1
回答已采纳
2回答
当列组宽度改变时，变换不起作用。
$('#but').click(function() {
if ($('table col').hasClass("expanded"))
$('table col').removeClass('expanded');
else
$('table col').addClass('expanded');
});
table,
th,
td {
border: 1px solid black;
}
table col {
浏览 2提问于2016-02-26得票数 0
1回答
这些代码在逻辑上等价吗？
<colgroup span="7">
</colgroup>
和
<col span="7" />
和
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
是否有任何通过HTML的属性或通过CSS的属性具有相同的效果？也可以有人添加"colgroup“标签。没有足够的代表让我这么做
浏览 1提问于2011-06-12得票数 4
回答已采纳
1回答
当我运行下面的代码时，所有的比例都是关闭的。我需要更改什么才能获得正确的间距？底部标记为2的列的大小大约是顶部标记为4的列的4/5。
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup> <!-- Sets up table for spacing -->
<col width="10%">
浏览 0提问于2013-07-25得票数 0
4回答
我使用的是涡轮表，并希望使用以下内容：
根据内容自动调整所有列的大小。
让表格本身水平填充屏幕(如不手动指定宽度)
当自动大小的列需要比表宽度所能提供的空间更多的空间时，使表水平滚动，而无需手动指定任何列宽，以及在添加带有列切换的新列时。
从涡轮增压器的例子我得到：
<p-table [columns]="cols" [value]="cars" [scrollable]="true" scrollHeight="200px"
[style]="{'width':'100
浏览 0提问于2018-04-05得票数 4
我目前正在使用带有冻结列特性的PrimeNG表控件。
一切正常工作，我可以获得冻结的列，但现在我想修改我的冻结和取消冻结的列样式和自定义的列宽度，我已经使用了下面的属性。
代码：
<p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="cars" [scrollable]="true" scrollHeight="300px" frozenWidth="250px">
<ng-templ
浏览 1提问于2019-01-14得票数 2
回答已采纳
1回答
我不知道为什么我的内部表忽略了列宽。内表的所有列最终都具有相同的宽度。如有任何帮助或建议，将不胜感激。宽度是根据返回的列的数量和类型生成的。 外层表有几百行，每个内层表有50到100行。将来我可能会添加某种筛选器来限制外部行的数量，以提高性能。我对html不是很在行，对CSS和JavaScript只有基本的了解，但从我所读到的一切来看，这应该是可行的。 我已经查看了chrome开发人员工具元素，看看是否可以弄清楚外部表中的宽度是如何工作的，但我没有看到它从colgroup中提取宽度的位置，所以这似乎是一个死胡同。我可能对某些事情有基本的误解。 <!DOCTYPE html>
&l
浏览 12提问于2021-09-21得票数 0
回答已采纳
2回答
删除加载数据非常慢
、、、
我正在通过jquery调用调用WCF服务来加载数据。WCF服务返回数据的速度非常快，但淘汰赛正在缓慢地加载该数据。下面是我使用jquery对wcf服务的调用
function loadData(id) {
var input =
{
Id: id
};
$.ajax({
url: "../Service/Table/TableData",
type: "PUT",
conte
浏览 4提问于2013-06-28得票数 3
我在布局中遇到了IE6的问题。这是样本。
<div style="overflow:hidden;">
<table style="table-layout: fixed;" width="100%" border="0" cellpadding="4" cellspacing="0">
<colgroup>
<col width="30px"
浏览 7提问于2010-07-08得票数 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
2回答
我有一个表，其中包含一个RadTextBox和一个RadSpell控件。两者都在各自的td标签中，但在ie10和chrome中显示时，RadSpell按钮会与RadTextBox重叠。
该页面的代码为：
<table>
<colgroup>
<col width="33%" />
<col width="36%" />
<col width="31%" />
</c
浏览 0提问于2013-06-20得票数 0
回答已采纳
2回答
我想弄清楚这4个<br>标签是从哪里来的。
CMS正在这样做：
<div style="width:100%; border: solid 1px;">
<br>
<br>
<br>
<br>
<table style="display:block; width: 99%; height: auto; margin: 0px; vertical-align: top; border: solid 1px;" border="0"&
浏览 2提问于2011-09-28得票数 0
回答已采纳
我想斑马条纹只选择表使用。我不想为此使用jQuery。
tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
当我将其放入css文件中时，它会影响调用相同样式表的所有页面上的所有表。我想要做的是有选择地将它应用于特定的表。
我试过了，但它不起作用。
// in stylesheet
.zebra_stripe{
tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
}
// in html
<table cl
浏览 0提问于2012-09-16得票数 3
回答已采纳
我希望创建一个表组件，该组件通过colgroup和col标记分发样式列，并让使用该组件的人可以覆盖tbody内容的呈现方式。我在Vuejs中使用named slot，但在这里代码不起作用( colgroup和表正文内容槽似乎没有替换用户的内容)。
HTML
<body>
<div id='app'>
<simple-table>
<colgroup slot='colstyle'>
<col style='background-color: yellow;&#
浏览 2提问于2016-02-02得票数 1
回答已采纳
我正在尝试拆分一个表--例如，摘取thead并将其放入自己的表中。这是我到目前为止所得到的：
var $colgroup = $('<colgroup>');
$('td,th', '.query-results tr:first').each(function () {
$colgroup.append($('<col>').width($(this).outerWidth()));
});
$('<table>')
.insertBefore('
浏览 1提问于2013-04-23得票数 2
1回答
我在客户端系统(11.0.9600.18161版)和Chrome (50.0.2661.102m版)上使用jquery，在查看IE中的控制台后，这些表将不会按头排序：
HTML1509: Unmatched end tag.
我查看了generate，可以看到以下内容：
<colgroup class="tablesorter-colgroup">
<col style="width: 8.5%;">
<col style="width: 9.8%;">
浏览 2提问于2016-05-20得票数 1
回答已采纳
我有一个.NET 3.5网站，有一个表格标签，其中包含了colgroup，tbody和头标签。这是一个带有runat=" server“属性的服务器端标记。此表在Visual 2010中运行良好，但在安装了Visual 2012和.NET 4.5之后，此标记现在无法在Visual 2010和Visual 2012中编译。(我两者都试过了。)下面是正在抛出的编译器错误：
'System.Web.UI.HtmlControls.HtmlTableRowCollection.Add(System.Web.UI.HtmlControls.HtmlTableRow)‘的最佳重
浏览 3提问于2012-09-19得票数 12
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
