Modifying column with in a table (CSS)
Question
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.
1 answers
solution1
1 2011-04-07 15:55:29
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 have width set 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.