CSS를 표 셀에 적용 할 수 없습니다.

Question

표 셀에 class = image가 있는데 어떤 CSS를 적용 할 수 없습니다. 여기

<table class="outer"> 
     <tr> 
      <td> 
       <table class="column" id="leftColumn"> 
        <tr> 
         <td> 
          <table class="cell" id="t1"> 
           <tr> 
            <td><asp:Literal runat="server" ID="t1r2c1" /></td> 
            <td class="image"> 
             <span id="s1" runat="server"> 
              <asp:PlaceHolder ID="p1" runat="server"> 
              </asp:PlaceHolder> 
             </span> 
            </td> 
            <td><asp:Literal runat="server" ID="t1r2c3" /></td> 
            <td class="gray"><asp:Literal runat="server" ID="t1r2c4" /></td> 
           </tr> 
          </table> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <table class="cell" id="t2"> 
          </table> 
         </td> 
        </tr> 
       </table> 
      </td> 
      <td> 
       <table class="column" id="rightColumn"> 
        <tr> 
         <td> 
          <table class="cell" id="t3"> 
          </table> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <table class="cell" id="t4"> 
          </table> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <table class="cell" id="t5"> 
          </table> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <table class="cell" id="t6"> 
          </table> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <table class="cell" id="t7"> 
          </table> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <table class="cell" id="t8"> 
          </table> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <table class="messages" id="t9"> 
          </table> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 

내 CSS입니다 : 내가 .cell 위해 할

.outer 
{ 
    border: none; 
    margin-left: auto; 
    margin-right: auto; 
} 
.outer td 
{ 
    vertical-align: top; 
} 
.column 
{ 
    border: none; 
} 
#rightColumn table, #leftColumn table 
{ 
    width: 100%; 
} 
.cell 
{ 
    border-collapse: collapse; 
    border: 2px solid black; 
    margin: 5px; 
} 
.cell td 
{ 
    border-collapse: collapse; 
    border: 2px solid black; 
    text-align: center; 
    vertical-align: middle; 
    padding-left: 3px; 
    padding-right: 3px; 
    padding-top: 0px; 
    padding-bottom: 0px; 
    font-size: 11pt; 
} 
.cell .image 
{ 
    padding: 0; 
    margin: 0; 
    height: 2px; 
    width: 7px; 
} 
.messages td 
{ 
    border-collapse: collapse; 
    border: 2px solid #FF0000; 
    text-align: left; 
} 
h1 
{ 
    text-align: center; 
    font-size: 150%; 
} 
h2 
{ 
    text-align: center; 
} 
th 
{ 
    height: 24px; 
    background-color: #2B60DE; 
    color: #FFFFFF; 
} 
.gray 
{ 
    background-color: #AAAAAA; 
} 

아무것도 이미지입니다 될 것 같다 여기에 첫 번째 테이블은 전형적인 행의 예를 보여줍니다 내 마크 업 (중첩 된 테이블)입니다 특정 크기 이하의 이미지를 축소 할 수 있습니다. 이미 실제 이미지보다 훨씬 작아서 축소가 진행 중임을 이미 알고 있습니다.

모든 조언을 주시면 감사하겠습니다.

감사합니다.

Answer 1

td이 작아지는 것을 방지하기 위해 line-height 또는 font-size 일 수 있습니다. line-height: 0px 및 font-size: 0px

Answer 2

에 이미지와 행의 td의 설정

봅니다 나는 http://jsfiddle.net/9xLqY/ 함께 귀하의 예제의 jsfiddle을 넣어.

<span id="s1" runat="server"> 
    <asp:PlaceHolder ID="p1" runat="server"></asp:PlaceHolder> 
</span> 

그래서 당신이 원하는 것보다 크게 세포를 강요하고 이러한 구성 요소 중 하나 여야합니다 나는 ASP 구성 요소를 제거 할 때 스타일이 잘 적용되고있다. #s1 및 #p1에 스타일을 추가해야합니다.