Thursday, May 28

Learnings #0007 - Web development - Related to HTML table element

CSS Immediate child selector. Styling the immediate child of a table td cell.
Lets say you wish to target particular elements i.e common elements  inside parent and it should not affect any other children of that element. i.e Select the immediate child of a element. We can use the ">" CSS selector for this.
http://meyerweb.com/eric/articles/webrev/200006b.html

An interesting problem that I encountered today when trying to apply CSS for the immediate "td" of a particular table. The "td" which I wanted to target also had another "table" inside it. Instead of writing classes to each of the "td" of my choice, I thought of using the CSS child selector.

So initially my code looked like this
table#mytable > td
which did not work, I then tried
table#mytable > tr > td
which again did not work.
The reason for this was that browsers also consider the tbody attributes for a table. Though it is mandatory for us developers to have the required semantically correct markup with tbody, thead and tfoot, we may sometimes omit/forget about it. So back to the issue. After changing the code to
table#mytable > tbody > tr > td{
   background-color : red;
}
 everything worked as expected. This was a very good point, I should have known.

Refer : http://stackoverflow.com/questions/5568859/why-doesnt-table-tr-td-work-when-using-the-child-selector


Printing a table
Printing a webpage can be tricky and sometimes if your webpage has a tabular data with your own css for sorting columns, pagination etc, then debugging a print can be time consuming.
Recently had to print a page with tabular data.

Chrome's print preview is a great feature. However for firefox and IE, we don't have a built in print preview. So my best and fastest approach was to select a fax option on the prompt on click of the print button. I had used the window.print() javascript function. When you click print to fax, you get a image which most likely represents how your printed page will look.

Now jumping to the issue, since I had tables with lot of text, when I previewed for print, it would display just few columns and not lot. As I already mentioned, columns had lot of sentences. However it did not strike me at first to check for the css white-space property. In my CSS it was set to "no-wrap" which caused the width of the column to increase causing all the other columns to hide not in printable view. When I realized this could be the issue (ofcourse with help from someone), I felt so naive. Well that's the reason I call myself a noob. NOOB!!!

Anyways one more time I learn that there is no magic in programming, everything what you see is for a reason. The fix was to override the white-space property to normal in my print functionality
@media print{
  .className {
     white-space : normal
  }
}

Firebug UI location
There is a stackoverflow question for almost everything. Made me realize how much I am dependent on Google. I make me feel good by counter thinking that, google gets work done and I have saved macro seconds of time, also I get to write it here. Naive.

http://stackoverflow.com/questions/7319525/open-firebug-in-right-side

Be the first one to Comment!!!

Post a Comment