無法讓CSS表格邊框在整個表格和嵌套表格中保持一致

-1

我表格中的第一行有三個單元格。我試圖設置四個單元格的第二行。我想邊界都是一樣的。但是，儘管如此，我還是無法做到這一點，因爲底行的單元格（具有四個單元格的行）要麼具有雙邊框，要麼沒有邊框。我已經厭倦了邊界崩潰和邊界風格，沒有運氣。我如何才能讓底部行看起來像第一行 - 只有一個1px的邊框 - 除了4個單元而不是3個單元？這裏是我的代碼：無法讓CSS表格邊框在整個表格和嵌套表格中保持一致

<style type="text/css"> 
table 
{ 
    border-collapse:collapse; 
} 
table.outer 
{ 
    border: 1px black solid; 
    border-collapse: collapse; 
    width:750px; 
} 
table.outer td 
{ 
    border: 1px black solid; 
    border-collapse: collapse; 
} 
table.nested 
{ 
    width: 750px; 
} 
table.nested td 
{ 
    border:0px black solid; 
    border-collapse:collapse; 
} 
</style>  
</head> 
<body> 

<table class="outer"> 
    <tr> 
    <td>foo 1</td> 
    <td>foo 2</td> 
    <td>foo 3</td> 
    </tr> 
     <td colspan="3"> 
      <table class="nested"> 
       <tr> 
       <td>bar 1</td> 
       <td>bar 2</td> 
       <td>bar 3</td> 
       <td>bar 4</td> 
       </tr> 
      </table> 
     </td> 
</table>

來源

2012-06-29 dwstein

是否有任何理由爲什麼你必須有一個嵌套表？如果您希望兩行看起來完全相同，請嘗試添加更多行並調整每個單元的colspan。如果找到三個和四個的最小公倍數，則可以製作一個有十二列的表格，並將一行的colspan的三列設置爲四，將colspan的行設置爲四列到三。

表格中的嵌套表格可能對CSS有問題，而且對於頁面來說也較重。

<table class="outer"> 
    <tr> 
    <td colspan="4">foo 1</td> 
    <td colspan="4">foo 2</td> 
    <td colspan="4">foo 3</td> 
    </tr> 
    <tr> 
    <td colspan="3">bar 1</td> 
    <td colspan="3">bar 2</td> 
    <td colspan="3">bar 3</td> 
    <td colspan="3">bar 4</td> 
    </tr> 
</table>

這樣，你也可以樣式的所有單元格只用一個CSS td選擇，如果你想在兩行之間有着共同的風格。答案的

額外的解釋：（使用LCM爲表列的總數確保每個細胞可以是大小爲在其行中的其他細胞一樣，在不影響在其它行的細胞的尺寸。只要表中列的總數可以被n整除，就可以用n個單元格組成行。因此，使用這個十二列寬的表格，您可以使用1,2,3,4,6或12列和所有單元格都可以以表格中間爲中心，而且，如果要動態生成表格，使用此方法編寫每行所需的單元格不會太困難）

來源

2012-06-29 14:31:50 FlyingMolga

我沒有一個很好的理由，除了我很難讓你的解決方案看起來像上面提供的解決方案。 – dwstein

如果你只用創建表的HTML代碼來代替它，並將'class =「outer」'添加到表標記中（忘記添加這個標記），那麼所有單元格應該具有相同的樣式，而不管行是什麼。您可能會以這種方式節省一些加載時間，並且不必維護兩個單獨的'td'風格。另外，您可以在表格中添加其他三個或四個單元格，而不必擔心嵌套。 – FlyingMolga

只使用一個表格，你也應該能夠從CSS中去除'border-collapse'。 – FlyingMolga

我看到兩個問題。首先，圍繞嵌套表的<td>標籤應該確實是<tr>標籤。其次，嵌套表border寬度應該是1px，而不是0px。

HTML：

<table class="outer"> 
    <tr> 
     <td>foo 1</td> 
     <td>foo 2</td> 
     <td>foo 3</td> 
    </tr> 
    <tr colspan="3"> 
     <table class="nested"> 
      <tr> 
       <td>bar 1</td> 
       <td>bar 2</td> 
       <td>bar 3</td> 
       <td>bar 4</td> 
      </tr> 
     </table> 
    </tr> 
</table>

CSS：

table { 
    border-collapse:collapse; 
} 

table.outer { 
    border: 1px black solid; 
    border-collapse: collapse; 
    width:750px; 
} 

table.outer td { 
    border: 1px black solid; 
    border-collapse: collapse; 
} 

table.nested { 
    width: 750px; 
} 

table.nested td { 
    border:1px black solid; 
    border-collapse:collapse; 
}

JS小提琴：http://jsfiddle.net/5D2hN/

來源

2012-06-29 14:23:49 JSW189

這個html也是一樣無效。你需要''和''。 –

你釘了它！非常感謝。 – dwstein

無法讓CSS表格邊框在整個表格和嵌套表格中保持一致

回答

相關問題