0

我是网络编程的新手，我正在处理的网页的初稿在表格中包含表格。当我阅读更多内容时，我发现将外部表格呈现为 div 并将表格嵌套在外部 div 的单元格中是更好的样式。但是，一旦我将表格标签切换为 div，一切都停止了显示。我确定我遗漏了一些明显的东西。这是代码：

CSS：

.Dashboard
{
    display: table;
    table-layout: fixed;
    height: 500px;
    width: 500px;
}
.col
{
    display: table-column;
}
.cell1
{
    display: table-cell;
    border: 1px solid black;
}
.cell2
{
    display: table-cell;
    border: 1px solid black;
}
.cell3
{
    display: table-cell;
    border: 1px solid black;
}
.cell4
{
    display: table-cell;
    border: 1px solid black;
}
table.inner, td
{
    border-collapse: collapse;
    border: 2px solid black;
    text-align: center;
    padding: 2px;
}
td.image
{
    padding: 0;
    margin: 0;
}

HTML：

<form id="form1" runat="server">
<asp:Label runat="server" ID="label"></asp:Label>
<div runat="server" id="Dashboard" class="Dashboard">
    <div class="col">
        <div class="cell1">
            <table class="inner" id="t1">
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr><...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
            </table>
        </div>
        <div class="cell2">
            <table class="inner" id="t2">
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
            </table>
        </div>
    </div>
    <div class="col">
        <div class="cell3">
            <table class="inner" id="t3">
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
            </table>
        </div>
        <div class="cell4">
            <table class="inner" id="t4">
                <tr>...</tr>
            </table>
        </div>
    </div>
</div>
</form>
</body>
</html>

我意识到目前所有的单元格都是相同的，但这会改变——因此有四种不同的 CSS 规范。

任何建议表示赞赏。

4

2 回答 2

0

好的做法是使用table lessHTML 进行标记，除非您确实有要显示的表格数据。桌子是为了Tabular data！.但是，在您的情况下，问题出在display:CSS 属性上。如果你把 display:block; 而不是table-cell等，布局开始出现在您的页面上。所以我建议看看W3schools

于 2012-06-18T13:47:13.297 回答
0

您的代码中唯一的错误是您将display:table-column用于.col，尝试将其删除或将其更改为 table-cell 或 table-row ，您的代码应该可以工作。

于 2012-06-18T14:03:53.483 回答