HTML中的数据格式不正确
我制作了一个HTML并尝试了所有组合。我无法获得正确的格式。 最后一列超出了表格宽度。
另外，我附上了问题的截图。
请找到以下代码，并在此处提出错误建议：
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<table id="Table_Upper" cellspacing="1" cellpadding="1" width="1000" style="table-layout:fixed">
<tr>
<td width="150"></td>
<td>
<table id="Table_calc" cellspacing="1" cellpadding="1" width="102">
<tr>
<div width="150" class="heading">Amortization Calculation</div>
</tr>
<tr>
<td valign='top' width="250px">Total numbers of amortization</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
</tr>
<tr>
<td valign='top' width="250px">Interest rate %</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
</tr>
<tr>
<td valign='top' width="250px">Amortization per year</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
</tr>
<tr>
<td valign='top' width="250px">Interest per year</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
</tr>
</table>
</td>
<td style="width:300px"></td>
<td>
<table id="Table_calc" cellspacing="1" cellpadding="1" width="102">
<tr>
<div width="150" class="heading">Amortization Calculation</div>
</tr>
<tr>
<td valign='top' width="240">Total numbers of amortization</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
</tr>
<tr>
<td valign='top' width="240">Interest rate %</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
</tr>
<tr>
<td valign='top' width="240">Amortization per year</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
</tr>
<tr>
<td valign='top' width="240">Interest per year</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
</tr>
</table>
</td>
<td style="width:100px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width:250px" valign="top">
<table id="Table_OwnersTogether" cellspacing="1" cellpadding="1" width="1000" style="table-layout: fixed">
<tr>
<th style="width: 100" valign='top'>Income Details</th>
<th width="70">2018
<!-- Faktiska ränta-->
</th>
<th width="70">2019
<!-- Kalkylränta-->
</th>
<th width="70">2020
<!-- Faktiska ränta-->
</th>
<th width="70">2021
<!-- Kalkylränta-->
</th>
<th width="70">2022
<!-- Faktiska ränta-->
</th>
<th width="70">2023
<!-- Kalkylränta-->
</th>
<th width="70">2024
<!-- Faktiska ränta-->
</th>
<th width="70">2025
<!-- Kalkylränta-->
</th>
<th width="70">2026
<!-- Faktiska ränta-->
</th>
<th width="70">2027
<!-- Faktiska ränta-->
</th>
</tr>
<tr>
<td width="100" valign='top'>
<%=hentlabel("HFA4440")%>
</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'>
</td>
</tr>
</table>
</td>
</tr>
</table>
2 个答案:
答案 0 :(得分：0)
您的问题是input元素只是彼此重叠，并且尝试设置其宽度不起作用，因为设置width元素的input属性仅适用于某些类型（此处不做任何事情）。
这是你可以做的一件事：
更改所有这些行
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" ...
到这个
<input readonly style="background-color: <%=slskb_color5%>; width:70px" type="text" ...
掩盖问题而不是实际修复它的替代方法是将溢出设置为隐藏在表元素中，如下所示
<table id="Table_OwnersTogether" style="table-layout: fixed; overflow: hidden; width:1000px" cellspacing="1" cellpadding="1">
答案 1 :(得分：0)
我可以看到，在下面的代码中，您需要添加<TD>几个<td colspan="2">
<tr>
<td colspan="2"><div width="150" class="heading">Amortization Calculation</div></td>
</tr>
请检查此JSBin，看看这是否是您所需要的。以下是完整的参考代码
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<table id="Table_Upper" cellspacing="1" cellpadding="1" width="1000" style="table-layout:fixed">
<tr>
<td width="150" ></td>
<td>
<table width=100% id="Table_calc" cellspacing="1" cellpadding="1" width="102">
<tr>
<td colspan="2"><div width="150" class="heading">Amortization Calculation</div></td>
</tr>
<tr>
<td valign='top' width="250px">Total numbers of amortization</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
</tr>
<tr>
<td valign='top' width="250px">Interest rate %</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
</tr>
<tr>
<td valign='top' width="250px">Amortization per year</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
</tr>
<tr>
<td valign='top' width="250px">Interest per year</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
</tr>
</table>
</td>
<td style="width:300px"></td>
<td>
<table width=100% id="Table_calc" cellspacing="1" cellpadding="1" width="102">
<tr>
<td colspan="2"><div width="150" class="heading">Amortization Calculation</div></td>
</tr>
<tr>
<td valign='top' width="240">Total numbers of amortization</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
</tr>
<tr>
<td valign='top' width="240">Interest rate %</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
</tr>
<tr>
<td valign='top' width="240">Amortization per year</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
</tr>
<tr>
<td valign='top' width="240">Interest per year</td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
</tr>
</table>
</td>
<td style="width:100px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width:250px" valign="top">
<table id="Table_OwnersTogether" cellspacing="1" cellpadding="1" width="1000" style="table-layout: fixed">
<tr>
<th style="width: 100" valign='top'>Income Details</th>
<th width="70">2018
<!-- Faktiska ränta-->
</th>
<th width="70">2019
<!-- Kalkylränta-->
</th>
<th width="70">2020
<!-- Faktiska ränta-->
</th>
<th width="70">2021
<!-- Kalkylränta-->
</th>
<th width="70">2022
<!-- Faktiska ränta-->
</th>
<th width="70">2023
<!-- Kalkylränta-->
</th>
<th width="70">2024
<!-- Faktiska ränta-->
</th>
<th width="70">2025
<!-- Kalkylränta-->
</th>
<th width="70">2026
<!-- Faktiska ränta-->
</th>
<th width="70">2027
<!-- Faktiska ränta-->
</th>
</tr>
<tr>
<td width="100" valign='top'><%=hentlabel("HFA4440")%></td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
<td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
<td>
<input readonly style="background-color: <%=slskb_color5%>;" type="text" width="70" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1 %>'></td>
</tr>
</table>
</td>
</tr>
</table>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？