这是表的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/

10-11 13:53