0

我有带有 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：

.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: 0pxandfont-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>

所以它必须是这些组件之一，它迫使细胞比你想要的大。您需要为#s1和添加样式#p1。

于 2012-07-26T21:53:30.250 回答