html - 在 Div 表中对齐表

Question

我用一个包含四个表格作为单元格的 div 表格替换了一个包含四个表格(在网格中)的表格。我似乎绝对无法开始工作的两件事是:

1. 如何使用 display: table 去除 div 标签的表格边框？

2. 左下方的表格坚持与单元格的最左边缘对齐，而我希望它与单元格的最右边缘对齐。甚至相对定位对此也没有影响。

这是 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;

有了定位，找到左下方的table id并使用

float: right;

但是你最好的选择还是摆脱表格。所有这些都可以直接使用 CSS 轻松完成。