0

CSSを適用できないように見えるclass=imageのテーブルセルがあります。これが私のマークアップ（ネストされたテーブル）で、最初のテーブルは典型的な行の例を示しています。

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

.cell .imageに対して私が行うことは、画像を特定のサイズ未満に縮小できないようです。これは、実際の画像よりもすでにはるかに小さいため、縮小がすでに行われていることを私は知っています。

アドバイスをいただければ幸いです。

4

2 に答える 2

0

が小さくなるのをline-height防いfont-sizeでいる可能性があります。td

td画像のある行の s を および にline-height: 0px設定してみてくださいfont-size: 0px

于 2012-07-26T21:51:39.937 に答える
0

http://jsfiddle.net/9xLqY/jsfiddleであなたの例をまとめました。ASP コンポーネントを削除すると、スタイルが適切に適用されます。

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

したがって、セルを必要以上に大きくするのは、これらのコンポーネントの 1 つに違いありません。とのスタイルを追加する必要があり#s1ます#p1。

于 2012-07-26T21:53:30.250 に答える