我在使用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设计复杂表格时遇到困难

回答

相关问题