样式如何影响功能?如果提供内联样式而不是这种样式怎么办?
问题描述：
样式
Style
<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
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;
}
答
(#tblITProjDetails").html(tbl); dataTable(); 返回false； }
("#tblITProjDetails").html(tbl); dataTable(); return false; }
样式是样式.它们的效果不取决于样式的提供方式:在单独的实体或内联中.
至于问题的第一部分，目前尚不清楚.您是否想知道样式的工作方式或使用样式进行渲染的方式?也许这不是答案，但是您可以从阅读有关样式及其效果的文章开始:
http://en.wikipedia.org/wiki/Css [ http://www.w3.org/Style/CSS/ [ http://www.dmoz.org/Computers/Data_Formats/Style_Sheets/CSS/ [ ^ ].
此外，仅通过编写和测试即可发现样式效果的许多微妙方面.但是，您应该了解，不幸的是，在不同的浏览器中使用不同的布局引擎进行渲染有些不同.有关浏览器兼容性问题，请参阅上面显示的最后一个参考，并使用此比较表:
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29 [ ^ ].—SA
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