Question

我有table = 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似乎能够将图像缩小到一定尺寸以下 - 这已经比实际图像小得多，所以我知道一些缩小已经在进行。

感谢任何建议。

Answer 1

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

尝试将图片行的td设置为line-height: 0px和font-size: 0px

Answer 2

我在http://jsfiddle.net/9xLqY/汇总了您jsfiddle的示例。当我删除ASP组件时，样式应用得很好：

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

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

无法将CSS应用于表格单元格

2 个答案: