HTML表格縮進問題

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>

的問題是：如何擺脫表的這個可怕的縮進在另一張桌子內？

來源

2010-11-09 Daniel Ganiev

你的CSS代碼，甚至jsbin.com活生生的例子可以幫助我們 – Sotiris 2010-11-09 11:45:38

我只有一個運行時形成的CSS，從DevExpress的控件。所有其他的CSS在這裏（不要問爲什麼它在每個標籤中實現，而不是在文件中，請）。 AND：Intuition說這個問題不在Devexpress的CSS中。 – 2010-11-09 11:51:48

嘗試的風格你的內心表如下：

.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; 
}

來源

2010-11-09 11:44:34

縮進縮小了，現在非常小，接近1px。但它仍然存在。可能還有一個CSS屬性？ :) – 2010-11-09 11:47:42

也許你還需要風格的表格行和單元格。看到我更新的答案。 – 2010-11-09 11:50:40

現在完美了，謝謝。 – 2010-11-09 11:55:03

這裏有一個如何的例子使用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>

來源

2010-11-09 11:46:13

HTML表格縮進問題

回答

相關問題