Asked 8/3, 2012 at 19:28 Answered 8/7, 2016 at 15:43

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

Holliehollifield answered 8/3, 2012 at 19:28 Comment(7)

Do you want this, jsfiddle.net/5Fpc7 – Nnw 8/3, 2012 at 19:37

See #6982754 – Cater 8/3, 2012 at 19:37

@SheikhHeera, but instead of repeating the class name again n again, i need to mention only once. – Holliehollifield 8/3, 2012 at 19:40

@sql_query Yeah, me, too! But we're not in luck. It's not supported the way you (and me) might think – Alcheringa 8/3, 2012 at 19:49

What now, is it solved or not? – Alcheringa 9/3, 2012 at 13:49

@yunzen, as you have mentioned in your answer, we can only use border, background, width and visibility with col. So, that means, still it's unsolved. I wrote the class name for each column. – Holliehollifield 9/3, 2012 at 16:31

I edited my answer: I have a non CSS solution – Alcheringa 9/3, 2012 at 17:13

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

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

edit

According to MDN, the only allowed attribute on <col> is span. All others are deprecated.

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

        })
    })
})

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 solution

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

Alcheringa answered 8/3, 2012 at 19:40 Comment(0)

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

Phyllys answered 15/1, 2016 at 0:48 Comment(6)

That does not answer the OP question. OP wants to use classes on cols. BTW How should your solution work with an unknown number of columns? – Alcheringa 4/7, 2016 at 11:17

I simply offered OP knowledge that is a multiple times more efficient than yours. How should your solution work with an unknown number of columns? I don't see how my solution is less dynamic than yours. – Phyllys 5/7, 2016 at 17:24

You have to make a difference. The number of columns is unknown to your stylesheet, but not to the source of the table. – Alcheringa 7/7, 2016 at 8:7

How is it a problem to apply CSS instead of HTML? You have to specifically tell which columns to affect in either languages. There is literally no difference, except the language being used – Phyllys 7/7, 2016 at 13:24

There is always the possibility that this table comes from a foreign source, which you cannot control. Just image two external sources which make two different tables, E.g. the first witch three columns, the second with five. You would have to make HTML analysis for this. I do HTML analyis with my JS on the client side. – Alcheringa 8/7, 2016 at 7:2

In that case, you indeed have the advantage. – Phyllys 8/7, 2016 at 14:55

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.

Phyllys answered 8/7, 2016 at 15:43 Comment(0)

edit

edit jQuery solution

VanillaJS solution

Try it here

Recommended topics

Hot tags