Question

我有这样的表格：

alt text

标记是：

<table style="width: 100%; padding:5px;">
<col style="width: 20%; text-align: left" />
<col style="width: 80%; text-align: left" />
<tr>
    <td>
        <div>
            Наименование</div>
    </td>
    <td>
        <dx:ASPxButtonEdit ID="beWorkTypeName" runat="server" AutoPostBack="False">
            <Buttons>
                <dx:EditButton>
                </dx:EditButton>
            </Buttons>
        </dx:ASPxButtonEdit>
    </td>
</tr>
<tr>
    <td>
        <div>
            Скважина</div>
    </td>
    <td>
        <dx:ASPxButtonEdit ID="beWell" runat="server" AutoPostBack="False">
            <Buttons>
                <dx:EditButton>
                </dx:EditButton>
            </Buttons>
        </dx:ASPxButtonEdit>
    </td>
</tr>
<tr>
    <td>
        <div>
            Дата начала</div>
    </td>
    <td>
        <table>
            <tr>
                <td>
                    <dx:ASPxDateEdit ID="deBeginDate" runat="server">
                    </dx:ASPxDateEdit>
                </td>
                <td>
                    <dx:ASPxButton ID="btnDateChange" AutoPostBack="false" Enabled="false" Text="Изменить дату"
                        runat="server">
                    </dx:ASPxButton>
                </td>
                <td>
                    <dx:ASPxCheckBox ID="cbIsMainWorkType" Enabled="false" runat="server">
                    </dx:ASPxCheckBox>
                </td>
                <td>
                    <div>
                        Основной вид работ в заявке</div>
                </td>
            </tr>
        </table>
    </td>
</tr>

问题是：如何摆脱另一个表中这个可怕的表缩进？

Answer 1

尝试按如下方式设置内部表的样式：

.innerTable {
    border: 0px;
    border-collapse: collapse;
    margin: 0px;
    padding: 0px;
}

编辑：您还可能需要从表格行和单元格中删除间距：

.innerTable tr {
    border: 0px;
    margin: 0px;
    padding: 0px;
}

.innerTable th {
    border: 0px;
    margin: 0px;
    padding: 0px;
}

.innerTable td {
    border: 0px;
    margin: 0px;
    padding: 0px;
}

Answer 2

这是一个如何在不使用表格的情况下使用CSS布局表单元素的示例 - 希望它会有所帮助吗？关键是在标签元素上设置宽度，然后将输入控件设置为正确的阵容。

<html>
<head>
<style type="text/css">
label {
float: left;
width: 10em;
margin-right: 1em;
}

.row {
float: left;
clear: left;
padding-bottom: .3em;
}
</style>
</head>
<body>

<form action="example.php">
<div class="row">
<label for="name">Name:</label>
<input id="name" name="name" class="text" type="text" />
</div>
<div class="row">
<label for="email">Email address:</label>
<input id="email" name="email" class="text" type="text" />
</div>
<div class="row">
<label for="phone">Telephone:</label>
<input id="phone" name="phone" class="text" type="text" />
</div>

<div class="row">
<input class="submit" type="submit"
value="Submit" />
</div>
</form>

</body>
</html>

Html表缩进问题

2 个答案: