0

I have a HTML table as shown in http://jsfiddle.net/Lijo/JN8Pm/1/ . This table is generated by gridview in asp.net. Hence I cannot add a class to “td” inside “tr”. [This is the suggestion in many forums; but that won't work for me due to gridview]

How can I

  1. set the background color of Emp ID column as Red?
  2. set the width of Emp ID column as 300px?

Reference:

Refer the following two for table styling

1. table-layout:fixed;
2. word-wrap:break-word;
  1. Using "word-wrap: break-word" within a table
  2. Word-wrap in an HTML table
  3. Adjusting HTML Table Cell Width using jQuery
  4. Table cells get hidden when total width is more than 100%
Community
  • 1
  • 1
LCJ
  • 22,196
  • 67
  • 260
  • 418
  • Your asp.net code that generates this would probably be useful for answering your question. Post it? – xthexder Aug 17 '12 at 13:42
  • @SRN Please see the width. It is not coming to 300px – LCJ Aug 17 '12 at 13:44
  • 1
    Since the code is generated from ASP.NET you will have to modify the ASP.NET code, unless you want to use JS/jQuery to select and class the elements. Can you show the ASP.NET code or are you looking at the jQuery option? – Disco Banana Aug 17 '12 at 13:50
  • @DiscoBanana I am fine with jQuery option if it can set the width – LCJ Aug 17 '12 at 13:53

2 Answers2

2

You can see live example here: http://jsfiddle.net/JN8Pm/8/

var table = $('#detailContentPlaceholder_grdTransactions'),
    trs = table.find('tr'),
    headTr = table.find('.second'),
    empHeader = $($(headTr).children('th')[1]);

table.width(table.width() + 300);

empHeader.css('background-color', 'red');
empHeader.width(300);

for (var i = 2; i < trs.length; i += 1) {    
    var td = $($(trs[i]).children('td')[1]);
    td.css('background-color', 'red');
    td.width(10);
}​

It's changing the color and the size of the EmplID column. I hope that this is solving your problem.

Minko Gechev
  • 25,304
  • 9
  • 61
  • 68
  • Thanks.. Even http://jsfiddle.net/Lijo/JN8Pm/10/ is fine for my real requirement. – LCJ Aug 17 '12 at 14:00
0

You could do something like this using jquery

 $('tr').each(function(index) {
     if (index > 1){
        $($(this).children()[1]).css("background-color","Red");

     }
     $($(this).children()[1]).css("width","300px");
});

http://jsfiddle.net/JN8Pm/6/

The width change doesn't really work in jsfiddle it seems , but it should be something along those lines

John
  • 3,512
  • 2
  • 36
  • 53
  • 1
    Please see http://jsfiddle.net/JN8Pm/8/ and http://jsfiddle.net/Lijo/JN8Pm/10/ for working demo in fiddle :-) – LCJ Aug 17 '12 at 14:09