2010-11-09 6 views
1

Je cette forme:problème tiret tableau Html

alt text

Markup est:

<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> 

Question est: Comment puis-je me débarrasser de ce tiret terrible du tableau à l'intérieur d'une autre table?

+0

votre code CSS et même un exemple vivant jsbin.com nous aiderait – Sotiris

+0

je ne dispose que d'un CSS formé d'exécution, des contrôles DevExpress. Tous les autres css sont ici (ne demandez pas pourquoi cela est implémenté dans chaque balise et pas dans le fichier, s'il vous plait). ET: Intuition dit que ce problème n'est pas dans CSS de Devexpress. –

Répondre

3

Essayez de coiffer votre table intérieure comme suit:

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

EDIT: Vous pourriez aussi avoir besoin d'enlever l'espacement des lignes de la table et les cellules:

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

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

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

Le retrait a diminué, maintenant il est très petit, près de 1px. Mais c'est toujours là. Peut-être un attribut CSS de plus, s'il vous plaît? :) –

+0

Peut-être que vous devez également styliser les lignes et les cellules de la table. Voir ma réponse mise à jour. –

+0

C'est parfait maintenant, merci. –

2

Voici un exemple de la façon dont pour mettre en forme des éléments de formulaire en utilisant CSS sans utiliser de tables - j'espère que ça va aider? La clé consiste à définir la largeur sur les éléments d'étiquette, ce qui rend ensuite les contrôles d'entrée à leur droite alignement.

<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>