How to use class attribute in html col

This is my code:

<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>

But, it is showing simple table. Need help !!

标签： html css html-table col

3条回答

老娘就宠你

2楼-- · 2019-01-20 11:19

Look here
http://www.w3.org/TR/CSS21/tables.html#columns

You can only set border, background, width and visibility with cols

edit

jQuery solution

With this little jQuery snippet you can copy all the class names from the col tags to the corresponding td tags
It works even with colspan in both coland td tags as well as with nested tables.

Example here as 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'))
            }

        })
    })
})

$(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
            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'))
            }

        })
    })
})

.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>

0人赞添加讨论(0) 举报

何必那么认真

3楼-- · 2019-01-20 11:29

Although the answer given here is about a year old at this point, I thought I'd just point out that you can easily do this with very simple CSS

Instead of trying to give the class to every td in its column, you can simply target them like this:

td:first-child{
    color: #1A5B71;
    text-align: right;
}

td:last-child{
    color: #FFFFFF;
    text-align: left;
}

Using JavaScript to complete this task is complete overkill

0人赞添加讨论(0) 举报

地球回转人心会变

4楼-- · 2019-01-20 11:29

I've written a small jQuery script for this that applies the class to every th and td element in the colspans table.

Try it here

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()
  })
})

The script isn't complicated, but here are the steps:

For every colgroup
- cache the classnames that the cols have
For every tr in the same table
- set a var col to 0
For every child of tr (ths and tds)
- add a class, selected with col
- increment col by its colspan attribute or 1 if it isn't present, so that at the next iteration, the script will know what class to select
Remove the colgroup altogether, because you could, for example, have a background that doens't have an opacity of 1, which would result in your ths and tds having a background with the wrong opacity.

I cache $(this) a couple of times, because it is faster to cache jQuery objects than calling $() everytime you want to select an element.

0人赞添加讨论(0) 举报