我一直在尝试正确使用colgroup和col标签,但我没有得到它.我阅读了规范和所有这些,但我不明白它的目的或如何实现它.
有什么建议？
我试图在html代码中隐藏一些col.使用MDN colgroup和col添加,我正在玩cols的样式.
在<td>与内容文本"可见的"在所有的浏览器(好)可见,在与内容文本"隐藏"在铬(坏)可见和隐藏在Firefox和边缘.(好).
我可以重新创建问题的最短代码在这里:
<!doctype html>
<html>
<head>
<title>css example</title>
<style type='text/css'>
col.visible {}
col.hidden { visibility:collapse; }
</style>
</head>
<body>
<table border='1'>
<colgroup>
<col class='visible'>
<col class='hidden'>
<tbody>
<tr>
<td>visible</td>
<td>hidden</td>
</tr>
</tbody>
</colgroup>
</table>
</body>
</html>
如何按colgroup对齐所有列？ 它与colspan一起使用？
这个HTML在这里使用Firefox和Chrome进行了测试,但没有浏览器为所有预期的列重新定义中心.
<table border="1" width="100%">
<colgroup>
<col style="text-align:center;background-color:red"/>
<col align="center" valign="bottom" style="background-color:blue"/>
<col align="center" valign="top" style="background-color:yellow"/>
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td align="center">$53</td>
</tr>
<tr>
<td><big>5869207</big></td>
<td>My first CSS</td>
<td><small>$49</small></td>
</tr>
</table>
在w3schools.com/tags上使用此示例(复制/粘贴到).
PS:有什么问题align和valign属性？样式(通过文本对齐)也没有响应.
正如我上面所说,我需要一个解决方案"by colgroup ".它也可以是"by colgroup或coltags with styleattribute".
我的模板系统需要使用colgroup(!),没有有效的解决方案colgroup.我的系统不需要与HTML5兼容,它使用类似"XHTML模块"的东西(参见例如DTD).
我的最终目标是创建一个表，该表的第一列保持不变，但其他列水平滚动。我找到了一些其他解决方案，但很好奇为什么 colgroup 和 Absolute 似乎不能一起工作。
html
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title>Test Table</title>
</head>
<body>
<p>Table with colgroup and col</p>
<div class = "container">
<table>
<colgroup>
<col class="column1">
<col class="columns2plus3" span="2">
</colgroup>
<tr>
<th>Lime</th>
<th>Lemon</th>
<th>Orange</th>
</tr>
<tr>
<td>Green</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
</table>
</div>
</body>
</html>
CSS
table {
width: 400px;
table-layout: fixed;
border: 1px solid purple;
}
.container {
width : 300px;
overflow: scroll;
}
td, th{
border: 1px solid black;
width: 50px;
}
.column1 {
background-color: …我有一个HTML表，上面有一些colgroups边框。我想在相邻组之间添加一些空间。有没有一种方法可以在CSS中执行此操作，而无需在组之间添加空单元格？
<table>
<colgroup style="border:1px solid blue;"><col><col></colgroup>
<colgroup style="border:1px solid blue;"><col><col></colgroup>
<thead>
<tr><th>Col A1</th><th>Col A2</th><th>Col B1</th><th>Col B2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td><td>B1</td><td>B2</td></tr>
</tbody>
</table>
所需的输出如下所示：
------------------- ------------------- | COL A1 | COL A2 | | COL B1 | COL B2 | ------------------ ------------------- | A1 | A2 | | B1 | B2 | ------------------- -------------------
到目前为止，似乎仅凭CSS不可能做到这一点。我将拭目以待，看看是否有人能解决这个问题，但是现在，我正在使用spacer-cell方法。这不是理想的解决方案，但是相对干净。这是一个工作示例：
根据文档，我们可以visibility: collapse在<col />元素上使用来折叠或折叠所有关联的列。
但是（在 Chrome 和 Edge 中）我注意到一些元素仍然可见，漂浮在折叠列将占据的区域的某个位置。我可以将其范围缩小到带有position: absolute或 的元素position: relative。这似乎是 Chrome 和 Edge 中的一个错误（均显示此行为）。在 Firefox 中，不会留下意外可见的痕迹。
const toggle = () => {
const table = document.querySelector("#my-table");
table.classList.toggle("collapsed");
};.table.collapsed .collapsible-column {
visibility: collapse;
}
.oops {
position: relative;
}<table id="my-table" class="table">
<colgroup>
<col span="2" class="collapsible-column" />
<col span="2" class="static-column" />
</colgroup>
<thead>
<tr>
<th scope="col">col 1<br /><span class="oops">oops</span></th>
<th scope="col">col 2</th>
<th scope="col">col 3</th>
<th scope="col">col …这些代码在逻辑上是等价的吗？
<colgroup span="7">
</colgroup>
和
<col span="7" />
和
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
通过HTML的任何属性或通过CSS的属性是否具有相同的效果？sombody还可以添加"colgroup"标签.没有足够的代表让我这样做.