Question

我正在处理我的应用程序中的表单，并尝试清理在我之前放置的代码。我正在遇到的东西似乎是不好的做法，我很难尝试缩短它并清理它。

这是代码......

<tr>
<td style="padding-top: 10px; padding-bottom: 10px;">
   <table border="0" cellpadding="0" cellspacing="0" width="100%">
       <tr>
          <td width="6%"></td> <---- I want to get rid of this!
          <td width="45%">
             <asp:CheckBox ID="chkBHRAExpiresDischarge" runat="server" onclick="RadioControl(this);" Text="Upon my discharge from treatment" />
          </td>
          <td>
             <asp:CheckBox ID="chkBHRAExpiresReceiptOfInfo" runat="server" onclick="RadioControl(this);" Text="Upon receipt of the requested information" />
           </td>
       </tr>
       <tr>
       <td></td> <------- Have to keep adding this for every checkBox
          <asp:Checkbox ID=.............."
       </tr>

所以我试图摆脱最初的缩进，主要是......

 <td width="6%"></td>

因为这已经到位，我必须做一个

<td></td>

在每一行之前，否则压痕消失。有没有办法解决这个问题，以便我的所有复选框都缩进？

Answer 1

您可以在复选框上使用colspan="2"并将padding-left: 6%作为样式。这是一个JS fiddle。我在第一行上方添加了一行以显示列间距，修改了第一行使用此更改，并使第二行保持不变。

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr><td>One</td><td>Two</td><td>Three</td></tr>
    <tr>
        <td width="45%" colspan="2" style="padding-left: 6%">
             <input type="checkbox" /><label>Checkbox</label>
        </td>
        <td>
            <input type="checkbox" /><label>Checkbox</label>
       </td>
   </tr>
   <tr>
        <td width="6%"></td> <!---- I want to get rid of this! -->
        <td width="45%">
             <input type="checkbox" /><label>Checkbox</label>
        </td>
        <td>
            <input type="checkbox" /><label>Checkbox</label>
       </td>
   </tr>
</table>

编辑：另外，我建议验证您的HTML。您可以使用doctype和其他必要的项目将代码段包装起来，以便在https://validator.w3.org识别错误和警告。

<!DOCTYPE html><html><head><title>Title is Required!</title></head><body>

    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr><td>One</td><td>Two</td><td>Three</td></tr>
        <tr>
            <td width="45%" colspan="2" style="padding-left: 6%">
                 <input type="checkbox" /><label>Checkbox</label>
            </td>
            <td>
                <input type="checkbox" /><label>Checkbox</label>
           </td>
       </tr>
       <tr>
            <td width="6%"></td> <!---- I want to get rid of this! -->
            <td width="45%">
                 <input type="checkbox" /><label>Checkbox</label>
            </td>
            <td>
                <input type="checkbox" /><label>Checkbox</label>
           </td>
       </tr>
    </table>

</body><html>

Answer 2

不确定您是否会认为这是可以接受的，但您可以保留<td width="6%"></td>并为其提供巨大的rowspan值。像这样：

<td width="6%" rowspan="999999"></td>

然后，您可以省略前999999行的空<td></td>。很可能你的行数少于那个;或者如果没有，只需使行距更高。由于巨大的rowpan值，表格不会变长。

当然，如果您还有不应用缩进的行，这一切都会崩溃;对此的修复可能是提前计算确切的行数值。

Web文档中的缩进

2 个答案: