Question

我已经用一个包含四个表作为单元格的div表替换了一个包含四个表（在网格中）的表。我绝对无法开展工作的两件事是：

如何使用display: table删除div标签的表格边框？
左下方的表格坚持与单元格的最左边缘对齐，我希望它与单元格的最右边缘对齐。即使是相对定位也不会影响到这一点。

这是CSS：

<style type="text/css">
    .Dashboard {
        display: table;
        border-collapse: collapse;
        border-width: 0px;
    }
    .row1 {
        display:table-row;
    }
    .row2 {
        display:table-row;
        height: 200px;
    }
    .cell1 {
        display: table-cell;
        padding: 2px;
        border: 1px solid black;
    }
    .cell2 {
        display: table-cell;
        padding: 2px;
        border: 1px solid black;
    }
    .cell3 {
        display: table-cell;
        padding: 2px;
        border: 1px solid black;
        text-align: right;
        vertical-align: top;
    }
    .cell4 {
        display: table-cell;
        padding: 2px;
        border: 1px solid black;
    }
    table.inner {
        border-collapse: collapse;
        border: 2px solid black;
        text-align: center;
        padding: 2px;
    }
    td {
        border-collapse: collapse;
        border: 2px solid black;
        text-align: center;
        padding: 2px;
    }
    td.image {
        padding: 0;
        margin: 0;
    }
</style>

表格布局如下：

<div runat="server" id="Dashboard" class="Dashboard">
    <div class="row1">
        <div class="cell1">
            <table class="inner" id="t1">
                <tr>...</tr>
                ...
                <tr>...</tr>
            </table>
        </div>
        <div class="cell2">
            <table class="inner" id="t2">
                <tr>...</tr>
                ...
                <tr>...</tr>
            </table>
        </div>
    </div>
    <div class="row2">
        <div class="cell3">
            <table class="inner" id="t3">
                <tr>...</tr>
                ...
                <tr>...</tr>
            </table>
        </div>
        <div class="cell4">
            <table class="inner" id="t4">
                <tr>...</tr>
                ...
                <tr>...</tr>
            </table>
        </div>
    </div>
</div>

感谢任何建议。

Answer 1

摆脱边界使用

border: none;

通过定位，找到左下方的表格ID并使用

float: right;

但你最好的选择是摆脱桌子。所有这些都可以通过直接css轻松完成。

在Div表中对齐表格

1 个答案: