无法将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应用于表格单元格

回答

相关问题