CODEWITHSUNDEEP
htmlcsshtml-tablecol
user918477
user918477

Reputation:

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

Upvotes: 5

Views: 11582

Answers (3)

yunzen
yunzen

Reputation: 33449

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>

Upvotes: 9

Gust van de Wal
Gust van de Wal

Reputation: 5291

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:

  1. For every colgroup
    • cache the classnames that the cols have
  2. For every tr in the same table
    • set a var col to 0
  3. 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
  4. 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.

Upvotes: 0

Gust van de Wal
Gust van de Wal

Reputation: 5291

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

Upvotes: 2

Related Questions