• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 814
  • Last Modified:

CSS style for Table First Column

Is it possible to apply a CSS style for first column in all tables in General?

      table      {font-size: 100%; margin-top: 1em; margin-bottom: 0em; width: 100%;}
      th      {text-align: left; border-bottom: 1px solid Black; margin: .25em; vertical-align: bottom;}
      tr      {vertical-align: top;}
      td      {margin: .25em; vertical-align: top; border-bottom: 1px solid #CCCCCC;}

Thanks

0
thiruna
Asked:
thiruna
  • 3
  • 3
  • 2
3 Solutions
 
RoonaanCommented:
Try using <col> element:

<style type="text/css">
.class1 {COLOR:black; background:#FFFFCC; text-decoration: none}
</style>

<table>
  <col class="class1">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
</table>  
0
 
thirunaAuthor Commented:
Thanks for comment....

I have around 10 to 15 tables in a single file and I donnt want to go to every table and write the Col tag.  I just to write it the CSS style file and browser should apply this style for first column in all table in html file...is that possible or can it obtained using Javascript...

Thanks
0
 
RoonaanCommented:
Using javascript you probably can. You have to lookup each <tr> tag, then lookup each first td or th element.

It will probably work, but would be more work than c&p-ing <col class="firstcol" /> fifteen times...

-r-
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
thirunaAuthor Commented:
The reason I require this to be generalised because...HTML file is like a template and CSS as a style sheet in our office....People here dont care about the interface and they just have feed in the table in the following format....

<table>
<tr><th>sadds</th></tr>
<tr><td>dfddsfds</td></tr>
<tr><td>dfddsfds</td></tr>
<tr><td>dfddsfds</td></tr>
<tr><td>dfddsfds</td></tr>
<tr><td>dfddsfds</td></tr>
</table>

and our CSS will do the rest ....

Any help or Suggestions???

Thanks in advance
Thiru
0
 
dougdayCommented:
Here's an example using javascript:

<html>
<head>

<script>
function get_first_td(elm) {
    if (elm.nodeName == 'TD')
        return elm;
    else {
        for (var i = 0; i < elm.childNodes.length; i++) {
            var td = get_first_td(elm.childNodes[i]);
            if (td != null)
                return td;
        }
    }
    return null;
}

function highlight_first(elm) {
    if (elm.nodeName == 'TABLE') {
        td = get_first_td(elm);
        if (td) td.className = "first";
    }
    else for (var i = 0; i < elm.childNodes.length; i++)
        highlight_first(elm.childNodes[i]);
}

function onbodyload() {
    highlight_first(document.documentElement);
}
</script>

<style>
    table     {font-size: 100%; margin-top: 1em; margin-bottom: 0em; width: 100%;}
    th        {text-align: left; border-bottom: 1px solid Black; margin: .25em; vertical-align: bottom;}
    tr        {vertical-align: top;}
    td        {margin: .25em; vertical-align: top; border-bottom: 1px solid #CCCCCC;}
    td.first  { color: blue; }
</style>

</head>

<body onload="onbodyload();">
  <table border="0">
  <tr>
    <td>First</td>
    <td>Middle</td>
    <td>Last</td>
  </tr>
  <tr>
    <td>First</td>
    <td>Middle</td>
    <td>Last</td>
  </tr>
  <tr>
    <td>First</td>
    <td>Middle</td>
    <td>Last</td>
  </tr>
  </table>
</body>
</html>

-Doug
0
 
thirunaAuthor Commented:
Thanks for your help... but this script highlights only the first cell of every table.  I want to highlight the entire first column of all table....

Thanks
0
 
RoonaanCommented:
replace TABLE with TR and it would probably work.

-r-
0
 
dougdayCommented:
Sorry, misunderstood.  Thanks Roonaan.  :)
-Doug
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now