How The Style Provided Effects The Function? What if inline styles are provided rather than this style?

Question

1.00/5 (1 vote)

See more:

Style

CSS

<style type="text/css">
        .dataTable
        {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            border: 1px solid #999999;
            width: 100%;
            font-size: 12px;
        }
        .dataTable td, .dataTable th
        {
            border: 1px solid #999999;
            padding: 3px 5px;
            margin: 0px;
        }
        .dataTable thead th
        {
            background-color: #cccccc;
            color: #444444;
            font-weight: bold;
            text-align: left;
        }
        .dataTable thead a
        {
            text-decoration: none;
            color: #444444;
        }
        .dataTable thead a:hover
        {
            text-decoration: underline;
        }
        /* Firefox has missing border bug! https://bugzilla.mozilla.org/show_bug.cgi?id=410621 *//* Firefox 2 */html< /**/ /**/ body .dataTable, x:-moz-any-link
        {
            margin: 1px;
        }
        /* Firefox 3 */html< /**/ /**/ body .dataTable, x:-moz-any-link, x:default
        {
            margin: 1px;
        }
        .style2
        {
            width: 189px;
        }
        .style3
        {
            width: 149px;
        }
        .style4
        {
            width: 184px;
        }
        .style7
        {
            width: 158px;
        }
        .style8
        {
            width: 124px;
        }
        .style9
        {
            width: 266px;
        }
    </style>

Data Table Creating Function

XML

function onsuccessgetITProj(msg)
      {
        var data = msg.d;
        if(oTable !=null)
                    {
                      oTable.fnClearTable();
                      oTable.fnDestroy();
                    }
          var tbl = "";
                tbl += "<thead>";
                tbl += "<tr>";
                tbl += "<th style='text-align:center; white-space:nowrap;'>Del</th>";
                tbl += "<th style='text-align:center; white-space:nowrap;'>Edit</th>";
                tbl += "<th style='text-align:left; white-space:nowrap; display:none;'>Project ID</th>";
                tbl += "<th style='white-space:nowrap; text-align:left;'>Project Name</th>";
                tbl += "<th style='white-space:nowrap; text-align:left;'>Created By</th>";
                tbl += "<th style='white-space:nowrap; text-align:left;'>Created Date</th>";
                tbl += "<th style='white-space:nowrap; text-align:left;'>Modified By</th>";
                tbl += "<th style='white-space:nowrap; text-align:left;'>Modified Date</th>";
                tbl += "</tr>";
                tbl += "</thead>";
                tbl += "<tbody>";
                for (var i = 0; i < data.ITProjDetails.length; i++) {
                            tbl += "<td style='cursor:Pointer;' id='txtdelete' align='center' onclick='return DeleteRecord("+i+");'><img src='image/Cross.png'> </td>";
                            tbl += "<td style='cursor:Pointer;' id='txtUpdate' align='center' onclick='return EditRecord("+i+");'><img src='image/Edit.png'></td>";
                            tbl += "<td style='text-align:right; white-space:nowrap; display:none;' id='txtProjID"+i+"'>" + data.ITProjDetails[i].Proj_IT_ID + "</td>";
                            tbl += "<td style='text-align:left; white-space:nowrap;' id='txtProjName"+i+"'>" + data.ITProjDetails[i].Proj_Name + "</td>";
                            tbl += "<td style='text-align:left; white-space:nowrap;' id='txtCreatedBy"+i+"'>" + data.ITProjDetails[i].CreatedBy + "</td>";
                            tbl += "<td style='text-align:right; white-space:nowrap;' id='txtCreatedDate"+i+"'>" + data.ITProjDetails[i].CreatedDate + " </td>";
                            tbl += "<td style='text-align:left; white-space:nowrap;' id='txtModBy"+i+"'>" + data.ITProjDetails[i].ModifiedBy + " </td>";
                            tbl += "<td style='text-align:right; white-space:nowrap;' id='txtModDate"+i+"'>" + data.ITProjDetails[i].ModifiedDate + " </td>";
                      tbl += "</tr>";
                }
                tbl += "</tbody>";
                tbl += "</table>";
                $("#tblITProjDetails").html(tbl);
                dataTable();
                return false;
      }

Posted 7-Sep-12 19:29pm

Ahsan Mirza

Add a Solution

Comments

Sandeep Mewara 8-Sep-12 4:33am

Why not do it ans see by yourself how it will look or what will happen?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2012-09-07T19:39:00

Styles are styles. The effects of them does not depends on how the styles are provided: in a separate entity or inline.

As to the first part of the question, it is unclear. Do you want to know how styles work or how the rendering with style is implemented? Maybe this is not an answer, but you can start from reading about styles and their effect:
http://en.wikipedia.org/wiki/Css[^],
http://www.w3.org/Style/CSS/[^],
http://www.dmoz.org/Computers/Data_Formats/Style_Sheets/CSS/[^].

Besides, many delicate aspects of style effects can be figured by just writing them and testing. However, you should understand that rendering by different layout engine use in different browsers is unfortunately somewhat different. Please see the last reference shown above for browser compatibility issues and use this comparison chart:
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29[^].

—SA