我已将包含四个表（在网格中）的表替换为包含四个表作为单元格的 div 表。我似乎完全无法工作的两件事是：
如何摆脱 div 标签的表格边框使用
display: table？左下角的表格坚持与单元格的最左边缘对齐，我希望它与单元格的最右边缘对齐。即使是相对定位也对此没有影响。
这是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>
任何建议表示赞赏。