CSS 值未应用于表格行和标题

Question

enter code here我确信 CSS 的创建只是为了惹我生气。

我在 CSS 文件中有以下内容:

.tabletop
{
    padding: 0px; 
    margin: 0px; 
    border: none; 
    float: left; 
    width: 100%;     
}

.tableth
{  
  height: 15px; 
  background: #eef3e2;     
}

在 View 中:

<table id="editorRows" class="tabletop" cellspacing="0">
        <tr>                
            <th class="tableth">  
                <input id="ChkAll" type="checkbox" onclick="SetAllCheckBoxes(this)" />               
            </th>

只有表格的格式是强制的，而不是表格标题元素。有任何想法吗？

请求的整个 CSS:

/* Edit Tables */
.tabletop
{
    padding: 0px; 
    margin: 0px; 
    border: none; 
    float: left; 
    width: 100%;     
}

.tableth
{  
  height: 15px; 
  background: #eef3e2;     
}

body
{
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    background: #fff;
    min-width: 600px;
    font: normal 12px/1.2em Verdana, Tahoma, Arial, Helvetica, Georgia, Sans-Serif;
}
a
{
    color: #369;
}
a:hover
{
    color: #fff;
    background: #369;
    text-decoration: none;
}
h1, h2, h3
{
    margin: .8em 0 .2em 0;
    padding: 5px, 2px, 5px, 2px;
}
h1
{
    font-size: 12.3em;
}
h2
{
    font-size: 1.2em;
    color: #369;
}
h3
{
    font-size: 1.1em;
}
h4
{
    font-size: 1em;
}
p
{
    margin: .4em 0 .8em 0;
    padding: 0;
}
img
{
    margin: 5px 0;
}

/*fdfcdc*/
table, th, td 
{
    border: none;     
}



/* Header styles */
#header
{
    clear: both;
    float: left;
    width: 100%;
    border-bottom: 1px solid #000;
    background-color: #cccccc;
}
#header p, #header h1, #header h2
{
    padding: .4em 15px;
    margin: 0;
    line-height: 1.2em;
}
#header h1
{
    font-size: 1.2em;
}
#header h2
{
    font-size: 1.1em;
}
#header h3
{
    font-size: 1em;
    color: #fe7;
}

#navbar ul
{
    clear: left;
    float: left;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

#navbar ul li
{
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

#navbar ul li a
{
    display: block;
    float: left;
    margin: 0 0 0 1px;
    padding: 3px 10px;
    text-align: center;
    background: #eee;
    color: #000;
    text-decoration: none;
    position: relative;
    line-height: 1.3em;
}

#navbar ul li a:hover
{
    background: #369;
    color: #fff;
}
#navbar ul li a.active, navbar ul li a.active:hover
{
    color: #fff;
    background: #000;
    font-weight: bold;
}
#navbar ul li a span
{
    display: inline-block;
    margin: 0;
    padding: 10px 0;
}

#leftnavbar ul
{
    clear: left;
    float: left;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

#leftnavbar ul li
{
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

#leftnavbar ul li a
{
    display: block;
    float: left;
    margin: 0 0 0 1px;
    padding: 3px 10px;
    text-align: center;
    /*background: #eee;*/
    color: #000;
    text-decoration: none;
    position: relative;
    line-height: 1.3em;
}

#leftnavbar ul li a:hover
{
    background: #369;
    color: #fff;
}
#leftnavbar ul li a.active, #leftnavbar ul li a.active:hover
{
    color: #fff;
    background: #000;
    font-weight: bold;
}
#leftnavbar ul li a span
{
    display: inline-block;
    margin: 0;
    padding: 10px 0;
}

#header img
{
    padding-left: 10px;
}
/* The Real Status info sub menu */
#statusinfo
{
    clear: both;
    background: #eef3e2;    
    border-top: 3px solid #666;
    margin: 0;
    padding: 6px 15px !important;
    text-align: right;
}

#logindisplay
{
    clear: both;
    background: #eef3e2;    
    border-top: 3px solid #666;
    margin: 0;
    padding: 6px 15px !important;
    text-align: right;
}

.title
{
    position: fixed;
    left: 4px;
    top: -1px;
    float: left;
}

.title h2
{
}

/* keep label and input on same line
.editor-label-same-line { 
    float:  ; 
} 

.editor-field-same-line { 

} 

.editor-field-input-same-line { 

} */

/*border: 1px solid #C0C0C0;  */





/* Top Menu */
.topmenu
{
    float: right;
    position: relative;
}

/* Left Menu */
.leftmenu
{
    float: left;
    vertical-align: top;
}
/* column container */
.colmask
{
    position: relative; 
    clear: both;
    float: left;
    width: 100%; 
    overflow: hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright, .colmid, .colleft
{
    /*float: left;*/
    /*width: 100%;*/
    position: relative;
    overflow: hidden;
}

.col, .col2, .col3
{
    position: relative;
    padding: 0 3em 1em 0;
    overflow: hidden;
}


.leftcol
{
    float: left;        
    height: 95%;
    width: 20%;
    left:  2px;     
    color: Black;
    padding: 2pc, 2pc, 2pc, 2pc;
    background: #ffffff; 
}

.rightcol
{
    float: left;
    height: 95%;
    width: 76%;  /*71*/
    left: 15px; 
    color: Black;
    padding: 2pc, 3pc, 2pc, 5pc;
    background: #ffffff;    
}


.leftmenu h2
{
    line-height:1.2em;
    font-size: 1.1em;
}
.leftmenu h3
{
    line-height:1.1em;
    font-size: 1em;
    color: #667;
}
.col2 ul
{
    margin: 5px 0;
    list-style: inside;
    list-style-type: square;
}
.col2 ul li
{
    margin-left: 15px;
    padding: 0;
}
/* Form layout elements */
fieldset 
{
    margin: 1em 0;
    padding: 1em;
    border: 1px solid #CCC;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset label 
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input[type="text"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

input[type="password"] 
{
    width: 200px;
    border: 1px solid #CCC;
}
/* Footer styles */
#footer
{
    clear: both;
    float: left;
    width: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background-color: #fdfcdc;
}
#footer p
{
    padding: 5px;
    margin: 0;
    position: relative;    
}

在 _Layout.cshtml 中编辑调用 Site.css

<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

Answer 1

我想这可能有点帮助!正如您在下面的示例中看到的那样，您使用的高度太小而看不出差异，这是因为复选框的高度是 13px，几乎与您使用的高度相同整个行(15px)

因此，css 已被应用，您只需要设置高度，稍微“更高”，例如 EXAMPLE

更新

这是一个更新 http://jsfiddle.net/luissanchezm86/QJmgd/1/ ，但我仍然没有看到错误!

希望对您有所帮助!