Comment faire pour supprimer les espaces entre les cellules dans un tableau html
J'essaie de supprimer l'espace blanc entre Table1Header et Table2Header. J'ai essayé border:0px, padding:0px et border-spacing:0px; les styles. Firefox et Opera me dire que mon border-style d'espacement est surdéfinie par l'agent utilisateur de style (ce qui est 2px). Comment puis-je forcer le navigateur à utiliser mon styleshits?
<table class="tableGroup">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr class="tableHeader">
<td><span class="tableHeader"><label>Table1Header</label></span>
</td>
</tr>
<tr class=" tableData">
<td>
<div class="ui-datatable">
<div>
<table>
<thead>
<tr>
<th>
<div><span><span class="ui-header-text">Table1Col1</span></span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>2</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr class="tableHeader">
<td><span class="tableHeader"><label>Table2Header</label></span>
</td>
</tr>
<tr class="tableData">
<td>
<div class="ui-datatable">
<div>
<table>
<thead>
<tr>
<th>
<div><span><span class="ui-header-text" >Table2Col1</span></span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>12345</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
span.tableHeader > label {
display: inline-block;
float:left;
line-height:30px;
padding-left:10px;
color: #202020;
font-size: 13px;
}
tr.tableHeader {
background-color: #EEEEEE;
}
table.tableGroup, table.tableGroup > tr > td > table {
border-spacing: 0px;
}
table.tableGroup div.ui-datatable th > div > span >span.ui-header-text {
color: #808080;
font-size: 11px;
}
table.tableGroup td, table.tableGroup th {
padding: 0px;
border: 0px;
}
table { border-collapse: collapse; }
est probablement ce que vous avez besoin. Mais, néanmoins -1 pour ce gâchis (même si c'est juste un exemple)!OriginalL'auteur user3193136 | 2014-01-14
Vous devez vous connecter pour publier un commentaire.
Les navigateurs ne sont pas en vous disant que votre
border-spacing
style est remplacée par l'utilisateur de l'agent de la feuille de style. Au lieu de cela, ils peuvent indiquer que de l'héritage n'a pas lieu. C'est tout simplement dû au fait que certains feuille de style définit la propriété sur l'élément.La raison pour laquelle votre règle n'est pas appliquée à l'intérieur
table
élément, c'est qu'il ne correspond à aucune de vos sélecteurs. Le sélecteur dene correspond pas, parce que
tr
élément n'est jamais un enfant detable
même si peut sembler. Par la syntaxe HTML, il y a un intervenanttbody
élément, même si son début et à la fin de la balise sont manquants. Le sélecteur suivant correspondent à:Bien sûr, un simple
table
sélecteur de faire le travail, à condition que vous voulez tous lestable
éléments de style par la règle.table.tableGroup table
si il essaie de l'effondrement de la frontière de toutes les tables imbriquées... ou même mieux justetable {}
, mais en tout cas +1, je n'ai pas dit lui quetbody
a été manquéeOriginalL'auteur Jukka K. Korpela
Vous pouvez simplement utiliser
border-collapse: collapse;
ou mêmeborder-spacing: 0;
est bienDémo
Vous pouvez facilement remplacer le useragent de la feuille de style avec un simple sélecteur d'élément.
Si vous souhaitez normaliser les styles, vous devez utiliser CSS Reset
Venir à votre sélecteur qui est semble sale pour moi, en tant yo sont le ciblage de la table avec
class
.tableGroup
et latable
imbriqués dans ceAfin de mieux vous utiliser
oui, mais si vous visez toutes les tables de ne pas utiliser ce sélecteur
OriginalL'auteur Mr. Alien
vous devez ajouter (border="0" cellpadding="0" cellspacing="0") Table des hommages dans chaque balise table
exemple
*exemple avec vos classes *
OriginalL'auteur fahd4007
Essayer cette
fonctionne en utilisant le css
tnx homme .. pas vécu comme u.. en essayant d'apprendre de Stackoverflow autant que je peux.. Votre réponse est beaucoup mieux que le mien.. j'apprends aussi que je peux le faire aussi. Merci ..
Sans rancune 🙂 nous répondons à tort et à nous apprendre, il suffit de le faire avec le CSS, je vais upvote votre réponse 🙂
OriginalL'auteur Shail Paras