CSS를 사용하여 표 머리글 서식을 지정하십시오.

Question

몇 년 전에 온라인으로이 CCS를 다운로드하여 새 테이블을 만들었으며 머리글 행이 매우 좁아서 한 열의 끝이 어디인지 확인하기가 어렵습니다. 다른 하나가 시작됩니다. 머리글에 왼쪽 또는 오른쪽 테두리가 없습니다.

HTML :

<table align="center" class="stats4"> 
    <tr> 
     <th>Category</th> 
     <th>Received </th> 
     <th>Open</th> 
     <th>Pending</th> 
     <th>Closed</th> 
     <th>Closed <= 5 Days</th> 
     <th>Closed 6-14</th> 
     <th>Closed 15-30</th> 
     <th>Closed > 30</th> 
     <th>Avg Days To Close</th>    
    </tr> 
    <%Do While not RSClosedCallSummary.EOF %> 
    <tr> 
     <td><%= RSClosedCallSummary("strCategory") %></td> 
     <td><%= RSClosedCallSummary("CallsReceived") %></td> 
     <td><%= RSClosedCallSummary("CallsOpen") %></td> 
     <td><%= RSClosedCallSummary("CallsPending") %></td> 
     <td><%= RSClosedCallSummary("CallsClosed") %></td> 
     <td><%= RSClosedCallSummary("ClosedWithin5Days") %></td> 
     <td><%= RSClosedCallSummary("ClosedWithin14days") %></td> 
     <td><%= RSClosedCallSummary("Closed15to30") %></td> 
     <td><%= RSClosedCallSummary("ClosedGt30") %></td> 
     <td><%= FormatNumber(RSClosedCallSummary("AvgDaysToClose"), 2) %></td> 
    </tr> 
    <%RSClosedCallSummary.MoveNext 
    Loop 
    %> 
</table> 

CSS :

/* Stats 4 table styles */ 


table.stats4 { 
    text-align: center; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-weight: normal; 
    font-size: 12px; 
    color: #fff; 
    background-color: #666; 
    border: 0px; 
    border-collapse: collapse; 
    border-spacing: 7px; 
} 

table.stats4 td { 
    background-color: #CCC; 
    color: #000; 
    padding: 5px 7px 5px 7px; 
    text-align: left; 
    border: 1px #fff solid; 
} 

table.stats4 td.hed { 
    background-color: #666; 
    color: #fff; 
    text-align: left; 
    border: 2px #fff solid; 
    font-size: 12px; 
    font-weight: bold; 
} 

은 내가 "패딩을"추가하는 방법에 대한 생각 CSS의 table.stats4 td.hed 섹션 -하지만 영향을주지 않습니다. 사실, 전체 섹션을 주석 처리하더라도 헤더는 변경되지 않습니다.

나는 온라인으로 보았지만 모든 예제는 클래스가 아닌 ID를 사용합니다. 3 가지 요소가 어떻게 연결되어 있는지 정확히 기억할 수 없습니다. 내 생각 엔 ..

상위 테이블 (table.stats4)이 전체 테이블에 적용됩니다.
가운데 하나 (table.stats4 td)는 태그에서 HTML의 모든 셀에 적용됩니다 (사용하는 헤더의 내용을 파헤 치기 위해?)
맨 아래쪽 (table.stats4 td.hed)은 라는 HTML 요소가 없기 때문에 약간 혼란 스럽습니다. 나는이 표시를 이해하지 못한다. "table.stats4 th"를 읽어야합니까? 내가 이상하게 생각한다면 머리글은 변하지 않는다.

전체 CSS 파일이 아래에 있습니다.

body { 
    font-family: arial; 
    font-size: 14px; 
    background: white; 
} 

/* Hyperlink styles */ 


a:link { 
    color: blue; 
    text-decoration: none; 
} 

a:visited { 
    color: blue; 
    text-decoration: none; 
} 

a:hover { 
    color: red; 
    text-decoration: underline; 
} 

/* Normal 'solid' black border table */ 

table.standard { font-size: 14px border-collapse: collapse; 
} 

/* Table Style for displaying of statistics */ 

table.stats { 
    text-align: center; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-weight: normal; 
    font-size: 11px; 
    color: #fff; 
    width: 400px; 
    background-color: #666; 
    border: 0px; 
    border-collapse: collapse; 
    border-spacing: 0px; 
    float: left 
} 

table.stats td { 
    background-color: #CCC; 
    color: #000; 
    padding: 4px; 
    text-align: left; 
    border: 1px #fff solid; 
} 

table.stats td.hed { 
    background-color: #666; 
    color: #fff; 
    padding: 4px; 
    text-align: left; 
    border-bottom: 2px #fff solid; 
    font-size: 12px; 
    font-weight: bold; 
} 

/* Stats 2 table styles */ 


table.stats2 { 
    text-align: center; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-weight: normal; 
    font-size: 11px; 
    color: #fff; 
    background-color: #666; 
    border: 0px; 
    border-collapse: collapse; 
    border-spacing: 0px/*; 
    float:left*/ 
} 

table.stats2 td { 
    background-color: #CCC; 
    color: #000; 
    padding: 4px; 
    text-align: left; 
    border: 1px #fff solid; 
} 

table.stats2 td.hed { 
    background-color: #666; 
    color: #fff; 
    padding: 10px; 
    text-align: left; 
    border-bottom: 2px #fff solid; 
    font-size: 12px; 
    font-weight: bold; 
} 

/* Stats 3 table styles */ 


table.stats3 { 
    text-align: center; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-weight: normal; 
    font-size: 11px; 
    color: #fff; 
    background-color: #666; 
    border: 0px; 
    border-collapse: collapse; 
    border-spacing: 0px; 
} 

table.stats3 td { 
    background-color: #CCC; 
    color: #000; 
    padding: 4px; 
    text-align: left; 
    border: 1px #fff solid; 
} 

table.stats3 td.hed { 
    background-color: #666; 
    color: #fff; 
    padding: 4px; 
    text-align: left; 
    border-bottom: 2px #fff solid; 
    font-size: 12px; 
    font-weight: bold; 
} 

#table_container { 
    width: 300px; 
    margin: 0 auto; 
} 

/* Stats 4 table styles */ 


table.stats4 { 
    text-align: center; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-weight: normal; 
    font-size: 12px; 
    color: #fff; 
    background-color: #666; 
    border: 0px; 
    border-collapse: collapse; 
    border-spacing: 7px; 
} 

table.stats4 td { 
    background-color: #CCC; 
    color: #000; 
    padding: 5px 7px 5px 7px; 
    text-align: left; 
    border: 1px #fff solid; 
} 

table.stats4 td.hed { 
    background-color: #666; 
    color: #fff; 
    text-align: left; 
    border: 2px #fff solid; 
    font-size: 12px; 
    font-weight: bold; 
} 

Answer 1

이 시도 : -

table.stats4 tr th { 
border:1px solid #000; 
} 

그것은 테이블 제목에 테두리를 추가합니다.

Answer 2

당신은 간단하게 사용할 수 있습니다 : - 테이블 헤드 내부

.stats4 th { 
    color:red; 
} 

텍스트가 빨간색으로 표시됩니다.