如何在表格的tbody / thead部分周圍創建邊框？

Question

我正在嘗試使用表格數據創建一個頁面，該頁面必須顯示為多個表格。 但是，我有四個相互矛盾的要求：

1. 每個表必須有一個邊框。
2. 每個表的列寬必須能夠根據內容重新調整大小。 但是，列寬必須在所有表中保持一致。 （即列的大小基於所有表中該列中的最大單元格）。

為了處理第二個要求，我有一個單獨的頂級表，其中包含多個thead和tbody部分。 這完美地完成了＃2。 本質上，我在一個較大的父表中創建了多個偽表，分組為一個帶有附帶tbody的thead：

<table>
   <thead>
      table1 header content...
   </thead>
   <tbody>
      table1 body content...
   </tbody>
   <thead>
      table2 header content...
   </thead>
   <tbody>
      table2 body content...
   </tbody>
</table>

現在，我試圖解決第一個要求。 每個偽表必須在其周圍有一個邊框，將其自身作為真正的表傳遞。

令我沮喪的是，我發現IE 6/7不允許在thead / tbody標簽周圍添加邊框樣式，或者我只是向thead和底部/左/右邊框添加了一個上/左/右邊框樣式風格到tbody。

為那些解決＃1的作品創建真正的表格和樣式邊框，但它打破了＃2。

另一種方法是使用first-child和last-child樣式來創建邊框。 不幸的是，這既不漂亮，也不適用於IE 6/7。

我一直在研究的另一個選擇是在整個表周圍創建一個邊框，並嘗試在偽表之間創建一行來創建我的分離，但是雖然我可以為它創建頂部/底部邊框，但我還沒有發現意味着擦除表格的左/右邊界。 那可能嗎？

我的最后一個選擇是創建用於繪制左，右，頂部和底部邊框的類，設置適當的表格單元格以使用這些類。 我知道這最終會起作用，但它非常笨重，並且會造成非常混亂的標記。 Colgroups不能救我，因為他們無法處理邊框樣式。 這是不幸的，因為它會使這個解決方案更容易忍受。

有沒有更好的方法來完成我可能錯過的邊界？

Answer 1

使用<table rules="groups">或類似的rules值

見http://www.w3.org/TR/html4/struct/tables.html#h-11.3.1

Answer 2

使用創建真實表的方法，然后嘗試這個。

我只想創建單獨的表。 讓我們假設每個表看起來像這樣：

<table>
    <thead>
        <tr>
            <th class="column_1">Header 1</th>
            <th class="column_2">Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        ...
    </tbody>
</table>

然后，使用jQuery設置寬度：

var columnOneWidth = 0; var columnTwoWidth = 0;

$(document).ready( function() {
    $(".column_1").each( function() {
        if( $(this).css("width") > columnOneWidth ) columnOneWidth = $(this).css("width");
    });
    $(".column_2").each( function() {
        if( $(this).css("width") > columnTwoWidth ) columnTwoWidth = $(this).css("width");
    });

    $(".column_1").css({width: columnOneWidth + "px"});
    $(".column_2").css({width: columnTwoWidth + "px"});
});

您所要做的就是在頭標記中包含jQuery Javascript文件（可從jquery.com獲得）：

<script type="text/javascript" src="scripts/my_jquery_file.js"></script>