这是我的代码:
<html>
<style>
.left-info
{
font-size:14px;
font-family:Tahoma, Helvetica, sans-serif;
color:#1A5B71;
font-weight:bold;
text-align:right;
}
.right-info
{
font-size:14px;
font-family:Tahoma, Helvetica, sans-serif;
color:#FFFFFF;
font-weight:bold;
text-align:left;
}
</style>
<body>
<table border="1">
<colgroup>
<col class="left-info" />
<col class="right-info" />
</colgroup>
<tr>
<td>3476896</td>
<td>My first HTML</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
</tr>
</table>
</body>
</html>
但是,它显示的是一张简单的桌子。需要帮助!!
查看此处
http://www.w3.org/TR/CSS21/tables.html#columns
使用col
的只能设置border
、background
、width
和visibility
编辑
根据MDN,<col>
上唯一允许的属性是span
。所有其他都已弃用。
编辑jQuery解决方案
使用这个小jQuery片段,您可以将col
标记中的所有类名复制到相应的td
标记
它甚至可以在col
和td
标记以及嵌套表中使用colspan。
此处示例为jsfiddle
JavaScript
$(document).ready(function() {
var find_TDs_at_COL = function(table, col) {
var ret = [];
$(table).children('tbody').children('tr').each(function() {
var col2 = 0;
$(this).children('td,th').each(function() {
oldCol2 = col2;
if ($(this).attr('colspan')) {
col2 += parseInt($(this).attr('colspan'));
} else {
col2++;
}
if (oldCol2 <= col && col2 > col) {
ret.push(this);
}
})
})
return $(ret);
}
$('table > colgroup').each(function() {
var $table = $(this).parent();
var col = 0;
$(this).children('col').each(function() {
var oldCol = col
if ($(this).attr('colspan')) {
col += parseInt($(this).attr('colspan'))
} else {
col++;
}
for (var i = oldCol; i < col; i++) {
find_TDs_at_COL($table, i).addClass($(this).attr('class'))
}
})
})
})
console.clear()
$(document).ready(function() {
"use strict";
var find_TDs_at_COL = function(table, col) {
var ret = [];
$(table).children('tbody').children('tr').each(function() {
var col2 = 0;
$(this).children('td,th').each(function() {
var oldCol2 = col2;
if ($(this).attr('colspan')) {
col2 += parseInt($(this).attr('colspan'));
} else {
col2++;
}
if (oldCol2 <= col && col2 > col) {
ret.push(this);
}
})
})
return $(ret);
}
$('table > colgroup').each(function() {
var $table = $(this).parent();
var col = 0;
$(this).children('col').each(function() {
var oldCol = col
var that = this
if ($(this).attr('colspan')) {
col += parseInt($(this).attr('colspan'))
} else {
col++;
}
for (var i = oldCol; i < col; i++) {
find_TDs_at_COL($table, i)
.addClass($(this).attr('class'))
// copy style as well
// .each(function() {
// const [ ...style ] = that.style
// for ( let r of style ) {
// this.style[r] = that.style[r]
// }
//})
}
})
})
})
.left-info
{
font-size:14px;
font-family:Tahoma, Helvetica, sans-serif;
color:#1A5B71;
font-weight:bold;
text-align:right;
}
.right-info
{
font-size:14px;
font-family:Tahoma, Helvetica, sans-serif;
color:#00FFFF;
font-weight:bold;
text-align:left;
}
.extra-info {
font-size:14px;
font-family:Tahoma, Helvetica, sans-serif;
color:#ff0000;
font-style: italic;
text-align:right;
}
.additional-info {
font-size:10px;
font-family:Tahoma, Helvetica, sans-serif;
color:#ffdd00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<colgroup>
<col class="left-info" />
<col class="right-info" />
<col class="extra-info" colspan="3"/>
<col class="additional-info"/>
<col />
</colgroup>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>C</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td></td>
<td>Extra</td>
<td>Yes</td>
<td>Add</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>Ugh</td>
<td colspan="2"></td>
<td>Don't trust</td>
</tr>
<tr>
<td>54379</td>
<td>My first JS</td>
<td colspan="2">Trust</td>
</tr>
</table>
VanillaJS解决方案
{
"use strict";
document.addEventListener('DOMContentLoaded', e => {
Array.from(document.querySelectorAll('table > colgroup')).forEach(cg => {
const table = cg.parentElement
let col = 0
Array.from(cg.querySelectorAll(':scope > col')).forEach(c => {
const oldCol = col
if (c.getAttribute('colspan')) {
col += +c.getAttribute('colspan')
} else {
col++
}
for (let i = oldCol; i < col; i++) {
find_TDs_at_COL(table, i).forEach(el => {
Array.from(c.classList).forEach(c => el.classList.add(c))
})
}
})
})
})
const find_TDs_at_COL = (table, col) => {
let ret = [];
Array.from(table.querySelectorAll(':scope > tbody > tr')).forEach(tr => {
let col2 = 0
Array.from(tr.querySelectorAll(':scope > td, :scope > th')).forEach(tc => {
const oldCol2 = col2
if (tc.getAttribute('colspan')) {
col2 += +tc.getAttribute('colspan')
} else {
col2++
}
if (oldCol2 <= col && col2 > col) {
ret.push(tc);
}
})
})
return ret
}
}
.left-info
{
font-size:14px;
font-family:Tahoma, Helvetica, sans-serif;
color:#1A5B71;
font-weight:bold;
text-align:right;
}
.right-info
{
font-size:14px;
font-family:Tahoma, Helvetica, sans-serif;
color:#00FFFF;
font-weight:bold;
text-align:left;
}
.extra-info {
font-size:24px;
font-family:Tahoma, Helvetica, sans-serif;
color:#ff0000;
font-style: italic;
text-align:right;
}
.additional-info {
font-size:10px;
font-family:Tahoma, Helvetica, sans-serif;
color:#ffdd00;
}
.shadow {
text-shadow: 2px 2px 0 black
}
.info {
text-decoration: overline;
}
<table border="1">
<colgroup>
<col class="left-info" />
<col class="right-info shadow info" />
<col class="extra-info" colspan="3"/>
<col class="additional-info"/>
<col />
</colgroup>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>C</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td></td>
<td>Extra</td>
<td>Yes</td>
<td>Add</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>Ugh</td>
<td colspan="2"></td>
<td>Don't trust</td>
</tr>
<tr>
<td>54379</td>
<td>My first JS</td>
<td colspan="2">Trust</td>
</tr>
</table>
<br><hr><br>
<table border="1">
<colgroup>
<col class="right-info" />
<col class="left-info" />
<col class="additional-info"/>
<col class="extra-info shadow" colspan="3"/>
<col />
</colgroup>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>C</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td></td>
<td>Extra</td>
<td>Yes</td>
<td>Add</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>Ugh</td>
<td colspan="2"></td>
<td>Don't trust</td>
</tr>
<tr>
<td>54379</td>
<td>My first JS</td>
<td colspan="2">Trust</td>
</tr>
</table>
虽然这里给出的答案已经有一年的历史了,但我想我应该指出,使用非常简单的CSS 可以很容易地做到这一点
您可以简单地将类作为目标:
td:first-child{
color: #1A5B71;
text-align: right;
}
td:last-child{
color: #FFFFFF;
text-align: left;
}
使用JavaScript完成此任务是完全高估
我为此编写了一个小的jQuery脚本,它将类应用于colspan
表中的每个th
和td
元素。
在这里试试
JavaScript:
$(function () {
$('colgroup').each(function () {
var $colgroup = $(this)
var classes = $colgroup.children().map(function () { return $(this).attr('class') })
$colgroup.siblings().children('tr').each(function () {
var col = 0
$(this).children().each(function () {
var $child = $(this)
$child.addClass(classes[col])
col += parseInt($child.attr('colspan')) || 1
})
})
$colgroup.remove()
})
})
脚本并不复杂,但以下是步骤:
- 对于每个
colgroup
- 缓存
col
具有的类名
- 缓存
- 对于同一表中的每个
tr
- 将var
col
设置为0
- 将var
- 对于
tr
(th
s和td
s)的每个孩子- 添加一个类,用
col
选择 - 将
col
的colspan
属性递增,如果不存在,则递增1,以便在下一次迭代中,脚本知道要选择哪个类
- 添加一个类,用
- 完全删除
colgroup
,因为例如,您可能有一个不透明度为1的背景,这将导致th
和td
的背景不透明度错误
我缓存$(this)
几次,因为缓存jQuery对象比每次选择元素时调用$()
更快。