在Div表中對齊表

我用包含四個表格的單元格替換了一個包含四個表（網格中）的表。兩件事情，我絕對似乎無法得到工作是：在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>

任何建議表示讚賞。

問候。

來源

2012-06-18 Kevin

數據是在這個「div表」數據還是一般內容？ – Curt

一些代碼會有所幫助。 – j08691

表中的數據是表格，正確的應該在表格中。但它們大小不一，我想將它們整齊排列在頁面上。我正在閱讀的divs是這種佈局的方式，但我遇到了很多麻煩。我編輯了我的問題以顯示一些代碼。 – Kevin

爲了擺脫邊框的使用

border: none;

有了定位，發現左下表中的id和使用

float: right;

但是你最好的選擇就是要擺脫反正表。所有這些都可以通過直接的CSS輕鬆完成。

來源

2012-06-20 15:19:52 Jeff

在Div表中對齊表

回答

相關問題