修改表格中的列（CSS）
middle += "<tr class='tRow'>"
+ "<td>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ gallery
+ "</a>"
+ "</td>"
+ "<td class='title'>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ ""+ (output.get(i).get("title")).replaceAll("\"","\'\'")+"" // replaces quatations into '
+ "</a>"
+ "</td>"
+
名称为“title”（类名）的列需要受样式表的影响以减小列的宽度。只有那一列需要受到影响。还有更多的专栏。 这是 CSS：
td.title{
width:18%;
}
但是这个 CSS 会影响表中的所有列。其余列的宽度受到影响，但其中一些列的宽度与 CSS 指定的宽度不同。我尝试了内联样式表，但它仍然影响所有列。 问题是什么？干杯
更多细节： 私有字符串 getBeginning(int tableNumber) {
return "<html><head><title>"+ (tableNumber - 1)+"</title>"
+ "</head><body>"
+ "<table id='example' class='tablesorter' cellpadding='3' >" // border='1' cellpadding='1' cellspacing='2'
+ "<thead>"
+ "<tr class='tHead'>"
+ "<th/>"
+ "<th>Title</th>"
+ "<th>Total Price</th>"
+ "<th>Currency</th>"
+ "<th>Condition</th>"
+ "<th>Location</th>"
+ "<th>End Time</th>"
+ "<th>Map</th>"
+ "</tr>"
+ "</thead>"
+ "<tbody>";
}
middle += "<tr class='tRow'>"
+ "<td>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ gallery
+ "</a>"
+ "</td>"
+ "<td class='title'>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ ""+ (output.get(i).get("title")).replaceAll("\"","\'\'")+"" // replaces quatations into '
+ "</a>"
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("total") +""
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("currency")+""
+ "</td>"
+ "<td>"
+ ""+condition+""
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("location")+""
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("endTime").split("T")[0]+""
+ "</td>"
+ "<td>"
+ "<a href='" + getMap(location, postCode, "0") + "'>"
+ "<img src='" + getMap(location, postCode, "1") + "'> "
+"</a>"
+ "</td>"
+ "</tr>";
字符串结束 ="";
我正在 Firefox 3.6.11 上运行此 Web 应用程序。没有尝试在不同的浏览器上运行它。
middle += "<tr class='tRow'>"
+ "<td>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ gallery
+ "</a>"
+ "</td>"
+ "<td class='title'>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ ""+ (output.get(i).get("title")).replaceAll("\"","\'\'")+"" // replaces quatations into '
+ "</a>"
+ "</td>"
+
The column having name 'title' (class name) needs to be affected by style sheet to decrease the width of column. Only that single column needs to be affected. There are more columns.
This is CSS:
td.title{
width:18%;
}
But this CSS affects all the columns in the table. The width of rest columns affected , but some of them has the width different than specified by CSS. I tried inline style sheet, but still it affects all columns.
What is the problem? Cheers
Additional details:
private String getBeginning(int tableNumber)
{
return "<html><head><title>"+ (tableNumber - 1)+"</title>"
+ "</head><body>"
+ "<table id='example' class='tablesorter' cellpadding='3' >" // border='1' cellpadding='1' cellspacing='2'
+ "<thead>"
+ "<tr class='tHead'>"
+ "<th/>"
+ "<th>Title</th>"
+ "<th>Total Price</th>"
+ "<th>Currency</th>"
+ "<th>Condition</th>"
+ "<th>Location</th>"
+ "<th>End Time</th>"
+ "<th>Map</th>"
+ "</tr>"
+ "</thead>"
+ "<tbody>";
}
middle += "<tr class='tRow'>"
+ "<td>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ gallery
+ "</a>"
+ "</td>"
+ "<td class='title'>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ ""+ (output.get(i).get("title")).replaceAll("\"","\'\'")+"" // replaces quatations into '
+ "</a>"
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("total") +""
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("currency")+""
+ "</td>"
+ "<td>"
+ ""+condition+""
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("location")+""
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("endTime").split("T")[0]+""
+ "</td>"
+ "<td>"
+ "<a href='" + getMap(location, postCode, "0") + "'>"
+ "<img src='" + getMap(location, postCode, "1") + "'> "
+"</a>"
+ "</td>"
+ "</tr>";
String end ="";
I am running this Web app on Firefox 3.6.11. Did not try to run it on different browsers.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这里需要注意的重要一点是，百分比值与表的可用空间量相关，而不是与页面或包含的 div 相关。尝试使用绝对值，例如
200。如果您已经在表格上设置了宽度，这也可能使事情变得复杂，这意味着您不允许浏览器决定它最终的宽度。在不查看其余代码并且不知道表格所在上下文的情况下，或者您是否在表格本身上设置了宽度的情况下，我可以告诉您，当表格本身设置了宽度时，在单个列上设置宽度将当其他列碰撞以填充空间时更改它们的宽度。在这种情况下，通常最好让单元格的大小自行排序，因为用于设置宽度的算法非常动态。或者，您可以非常严格地设置每列的宽度，完全按照您希望的显示方式。
要详细了解该主题，请参阅 HTML 规范。
The important thing to note here is that percentage values relate to the amount of space available to the table, not to the page or containing div. Try using an absolute value like
200. It might also complicate things if you already havewidthset on the table meaning you're not letting the browser decide how wide it will end up.Without seeing the rest of your code and knowing what context the table is in, or whether you have width set on the table itself, I can tell you that setting a width on a single column when the table itself has a width set on it will change the width of the other columns as they bump about to fill up space. In this situation it is generally a good idea to let the size of the cells sort themselves out, as the algorithm used to set the width is very dynamic. Alternatively you could be very strict and set the width on each column exactly as you will want it to appear.
To read up on the subject, see the HTML specification.