無法將CSS應用於表格單元格

我使用class = image的表格單元格，但似乎無法應用任何CSS。這裏是我的標記（嵌套表），其中第一個表顯示了一個典型行的例子：無法將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：

.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; 
}

沒有我來。細胞似乎圖像配是能夠將圖像縮小到一定尺寸以下 - 這已經比實際圖像小得多，所以我知道一些縮小已經在進行。

任何意見表示讚賞。

問候。

來源

2012-07-26 Kevin

可能是line-height或font-size阻止td變小。

嘗試td s的圖像的行設置爲line-height: 0px和font-size: 0px

來源

2012-07-26 21:51:39 Horen

我整理了一下例子的jsfiddle在http://jsfiddle.net/9xLqY/。

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

所以它必須是這些組件是迫使細胞比你要大的一個：當我刪除ASP組件的樣式被應用就好了。您需要爲#s1和#p1添加樣式。

來源

2012-07-26 21:53:30 Bill

無法將CSS應用於表格單元格

回答

相關問題