web-dev-qa-db-fra.com

Supprimer la bordure des cellules du tableau

Je sais que c'est une question idiote, mais il semble que j'ai complètement oublié comment le faire.

J'ai un HTML table et je veux supprimer toutes les bordures autour de toutes les cellules afin qu'il n'y ait qu'une seule bordure autour du tableau entier.

Mon code ressemble à:

<table border='1' width='500'>
  <tr><th><h1>Your Wheelbarrow</h1></th><tr>
    <th>Product</th>
    <th>Description</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
    <th>Delete</th>
  </tr>
htmlcssxhtmlhtml-table
22
user1278496

Il suffit de réduire les bordures du tableau et de les supprimer des cellules du tableau (éléments td).

table {
    border: 1px solid #CCC;
    border-collapse: collapse;
}

td {
    border: none;
}

Sans définition explicite de border-collapse, la suppression des bordures de cellules de tableau par plusieurs navigateurs n'est pas garantie.

46
brezanac

L'attribut HTML utilisé à cette fin est rules=none (à insérer dans la balise table).

12
Jukka K. Korpela

Utilisez simplement votre table dans un div avec une classe (.table1 par exemple) et ne définissez aucune bordure pour cette table en CSS. Ensuite, utilisez le code CSS pour cette classe. 

.table1 {border=1px solid black;}
3
perfectionist1
<style type="text/css">
table {
  border:1px solid black;
}
</style>
2
js1568

Vous avez probablement juste besoin de cette règle CSS:

table {
   border-spacing: 0px;
}

http://jsfiddle.net/Bz3Jt/3/

2
gumkins

Changez votre déclaration de table en:

<table style="border: 1px dashed; width: 500px;">

Voici l'exemple en action: http://jsfiddle.net/kc48k/

2
hjpotter92

Vous voudrez peut-être essayer ceci: http://jsfiddle.net/QPKVX/

Vous ne savez pas vraiment à quoi vous voulez que votre mise en page finale ressemble, mais cela résout également le problème de colspan. 

2
mikevoermans

Si aucune des solutions de cette page ne fonctionne et que vous rencontrez le problème ci-dessous:

 enter image description here

Vous pouvez simplement utiliser cet extrait de CSS:

td {
   padding: 0;
}
0
The Codesee