列宽设置 - HTML表

时间:2012-08-17 13:38:02

标签: jquery html css

我有一个HTML表格,如http://jsfiddle.net/Lijo/JN8Pm/1/所示。该表由asp.net中的gridview生成。因此我无法在“tr”中向“td”添加一个类。 [这是许多论坛的建议;但由于gridview,这对我不起作用]

我怎么能

  1. 将Emp ID列的背景颜色设置为红色?
  2. 将Emp ID列的宽度设置为300px?
  3. 参考

    请参阅以下两个表格样式

    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%

2 个答案:

答案 0 :(得分:2)

您可以在此处查看实时示例: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);
}​

它正在改变EmplID列的颜色和大小。 我希望这能解决你的问题。

答案 1 :(得分:0)

您可以使用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/

看起来宽度变化在jsfiddle中并不真正起作用,但它应该是沿着那些行的东西