相同的CSS爲兩個表，但單元格寬度不同

我有一個奇怪的問題。我用相同的代碼創建了兩個表，但它們呈現不同的風格。相同的CSS爲兩個表，但單元格寬度不同

這裏是我的代碼

table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
table, 
 
th { 
 
    border: 1px solid black; 
 
} 
 
table tr { 
 
    border: 1px black dotted; 
 
} 
 
table tr td { 
 
    border-right: solid 1px black; 
 
}

<div> 
 
    Table1 
 
</div> 
 
<table> 
 
    <tr> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    <th>3</th> 
 
    <th>4</th> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="4">1</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">12</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="4">1</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">12</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
</table> 
 
<br/> 
 
<div> 
 
    Table2 
 
</div> 
 
<table> 
 
    <tr> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    <th>3</th> 
 
    <th>4</th> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="4">a1</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">a12</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="4">a1</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">a12</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
</table>

https://jsfiddle.net/6b9eL0xk/

請幫助我瞭解爲什麼列寬度是不同的。

來源

2016-09-18 Hoàng Trần

由於您沒有爲表格的單元格設置寬度，因此它們的大小取決於其內容，這是不同的，因此佈局也是 – LGSon

請檢查它：https://jsfiddle.net/a0kxt17y/4/。「tr」的訂單仍然不正確。 @LGSon –

您需要給單元格一個寬度，就像下面的寬度一樣，它們會根據每個單元格中的剩餘部分（空白）調整它們的大小。

table { 
 
    border-collapse: collapse; 
 
width:100%; 
 
} 
 

 
table, th { 
 
    border: 1px solid black; 
 
} 
 
table tr { 
 
    border: 1px black dotted; 
 
} 
 
table tr td { 
 
    border-right : solid 1px black; 
 
    width: 25%;       /* added property */ 
 
}

<div> 
 
    Table1 
 
</div> 
 
<table> 
 
    <tr> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    <th>3</th> 
 
    <th>4</th> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="4">1</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2"> 12 </td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="4">1</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">12</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
</table> 
 
<br/> 
 
<div> 
 
    Table2 
 
</div> 
 
<table> 
 
    <tr> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    <th>3</th> 
 
    <th>4</th> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="4">a1</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2"> a12 </td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="4">a1</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">a12</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
</table>

來源

2016-09-18 14:46:36 LGSon

它的工作原理！謝謝。 –

@HoàngTrần不客氣 – LGSon

如果你的意思是列大小，這是因爲你的文本長度

更改它像表1

如果你想解決這個問題，添加寬度爲您列

來源

2016-09-18 14:48:26

相同的CSS爲兩個表，但單元格寬度不同

回答

相關問題