这是表的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 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>
导致表迷失方向,可以做什么来使表的行大小相等。
最佳答案
不确定我是否完全理解这个问题,但是代码中的结束标记和td rowpans之一存在一些问题,也许这就是为什么它无法正确呈现的原因。请尝试以下操作:
<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>
关于html - 我在使用CSS设计复杂表时发现困难,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34697841/