列宽设置 - HTML 表格

Posted

技术标签:

【中文标题】列宽设置 - HTML 表格【英文标题】:Column width setting - HTML table 【发布时间】:2012-08-13 23:14:45 【问题描述】:

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

我该怎么做

    将 Emp ID 列的背景颜色设置为红色? 设置 Emp ID 列的宽度为 300px?

参考

表格样式参考以下两个

1. table-layout:fixed;
2. word-wrap:break-word;
    Using "word-wrap: break-word" within a table Word-wrap in an HTML table Adjusting HTML Table Cell Width using jQuery Table cells get hidden when total width is more than 100%

【问题讨论】:

您的 asp.net 代码生成此代码可能有助于回答您的问题。发布吗? @SRN 请看宽度。它没有达到 300 像素 由于代码是从 ASP.NET 生成的,因此您必须修改 ASP.NET 代码,除非您想使用 JS/jQuery 来选择和分类元素。你能显示 ASP.NET 代码还是在看 jQuery 选项? @DiscoBanana 如果可以设置宽度,我可以使用 jQuery 选项 【参考方案1】:

您可以在此处查看实时示例: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 列的颜色和大小。 我希望这能解决您的问题。

【讨论】:

谢谢.. 即使jsfiddle.net/Lijo/JN8Pm/10 也能满足我的真正需求。【参考方案2】:

你可以用 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 中似乎并没有真正起作用,但它应该是这样的

【讨论】:

请参阅jsfiddle.net/JN8Pm/8 和jsfiddle.net/Lijo/JN8Pm/10 中的工作演示 :-)

以上是关于列宽设置 - HTML 表格的主要内容,如果未能解决你的问题,请参考以下文章

html table 列宽

HTML:将表格中的两列设置为比其他列宽固定像素数

HTML表格 - 表格宽度100%时保持列宽比例

html中table列宽怎么设置

excel如何设置表格的大小,比如列宽9厘米行高4厘米,不是设置单元格,是整个表格

EXCEL里面如何设置能把行高和列宽的长度固定?