htmlcsshtml-tablecol

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

Solution

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