我在使用css設計複雜表格時遇到困難

下面是表格的html代碼，我在結果表格中出現了disorentation問題。請幫助。我在使用css設計複雜表格時遇到困難

enter image description here

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
table, td, th { 
    border: 1px solid black; 
} 

table { 
    border-collapse: collapse; 
    width: 80%; 
    background-color:#A6F7EE; 

} 

th { 
    height: 50px; 
} 
</style> 
</head> 

<body> 
<table align="center"> 
<tr> 
<th>State</th> 
<th>Condition</th> 
<th>Slab Low</th> 
<th>Slab High</th> 
<th>Rate(in Rs)</th> 
</tr> 
<tr> 
<td rowspan="4">Andhra Pradesh (As per tariff order dated 23rd March 2015.)</td> 
<td colspan="3">Consumption less than 50 Units</td> <td align="center"> 1</td> <td align="center">50</td> <td align="center">1.45</td 
></tr> 
<tr> 
<td colspan="3" rowspan="2">Consumption between 1 & 100 Units <td> 1</td> <td>50</td> <td> 1.45</td> 
</tr><tr> 
<td>51</td> <td>100</td> <td>2.6</td> 
</tr> 

</body> 
</html>

結果表暈頭轉向什麼可以做，使相同大小的表的行。

來源

2016-01-09 siddhant bhatnagar

不知道我完全理解了這個問題，但是代碼中的閉合標記和td rowspans中的一個有一些問題，也許這就是爲什麼它沒有正確渲染的原因。請嘗試以下操作：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
table, td, th { 
    border: 1px solid black; 
} 

table { 
    border-collapse: collapse; 
    width: 80%; 
    background-color:#A6F7EE; 

} 

th { 
    height: 50px; 
} 
</style> 
</head> 

<body> 
<table align="center"> 
<tr> 
    <th>State</th> 
    <th>Condition</th> 
    <th>Slab Low</th> 
    <th>Slab High</th> 
    <th>Rate(in Rs)</th> 
</tr> 
<tr> 
    <td rowspan="3">Andhra Pradesh (As per tariff order dated 23rd March 2015.)</td> 
    <td colspan="3">Consumption less than 50 Units</td><td>1</td><td>50</td><td>1.45</td> 
</tr> 
<tr> 
    <td colspan="3" rowspan="2">Consumption between 1 & 100 Units</td> 
    <td>1</td> 
    <td>50</td> 
    <td>1.45</td> 
</tr> 
<tr> 
    <td>51</td> 
    <td>100</td> 
    <td>2.6</td> 
</tr> 
</body> 
</html>

來源

2016-01-09 20:19:08

如果固定的關閉和開啓標籤不起作用，那麼（以下你的截圖）HTML標記應該是這樣的（只是更改值）;

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Untitled Document</title> 
 
    <style> 
 
    table, 
 
    td, 
 
    th { 
 
     border: 1px solid black; 
 
    } 
 
    table { 
 
     border-collapse: collapse; 
 
     width: 80%; 
 
     background-color: #A6F7EE; 
 
    } 
 
    th { 
 
     height: 50px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <table> 
 
    <tr> 
 
     <th>1a</th> 
 
     <th>1b</th> 
 
     <th>1c</th> 
 
     <th>1d</th> 
 
     <th>1e</th> 
 
     <th>1f</th> 
 
    </tr> 
 
    <tr> 
 
     <td rowspan="4">2a</td> 
 
     <td>2b</td> 
 
     <td>2c</td> 
 
     <td>2d</td> 
 
     <td>2e</td> 
 
     <td>2f</td> 
 
    </tr> 
 
    <tr> 
 
     <td rowspan="2">3a</td> 
 
     <td rowspan="2">3b</td> 
 
     <td>3c</td> 
 
     <td>3d</td> 
 
     <td>3e</td> 
 
    </tr> 
 
    <tr> 
 
     <td>4c</td> 
 
     <td>4d</td> 
 
     <td>4e</td> 
 
    </tr> 
 
    <tr> 
 
     <td>5b</td> 
 
     <td>5c</td> 
 
     <td>5d</td> 
 
     <td>5e</td> 
 
     <td>5f</td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

來源

2016-01-09 20:39:14 Benjy1996

Benjy1996它的工作謝謝。 –

樂意幫助，記住如果它幫助你，請點擊綠色勾號接受答案！ – Benjy1996

我在使用css設計複雜表格時遇到困難

回答

相關問題