1
votes

La table à l'intérieur d'un div avec bordure n'occupe pas tout l'espace

J'essaye de placer une table dans un div. Div a sa propre bordure, mais je veux aussi la bordure de la table. J'ai donc défini la bordure de td mais j'ai trouvé que ma table n'occupait pas tout l'espace disponible. Y a-t-il quelque chose qui me manque ici?

Voici l'exemple de implémentation : p >

J'essaye de mentionner le code ci-dessous:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <table class="table">
        <tr>
          <td>First</td>
        </tr>
                <tr>
          <td>Second</td>
        </tr>
                <tr>
          <td>Third</td>
        </tr>
      </table>
    </div>
  </body>

</html>

/* Styles go here */

.container{
  width: 250px;
  height: 250px;
  position: relative;
  border: 1px solid black;
}

.table{
  position: absolute;
  width: 100%;
}

.table td{
  border-bottom: 1px solid;
      padding: 0px;
    margin: 0px;
    width: 100%;
}

* {
    margin: 0px;
    padding: 0px;
}

html css html-table

4 commentaires

J'ai mis à jour l'éditeur mais j'ai toujours trouvé une bordure séparée pour div et table. Veuillez vérifier le lien plunker mis à jour plnkr.co/edit/PldyKf60e6Jey1In3lPy

vous n'avez clairement pas affiché tout le code et le style pertinents sur ces éléments si votre résultat est différent des réponses fournies. Pourquoi utilisez-vous position: absolue sur votre table? Quel est votre style d'affichage div display lorsque vous l'inspectez (à l'aide de F12 - Web Developer Tools)?

Dans votre question, vous avez dit "Je veux aussi la bordure de la table ..." ce qui ne semble pas juste, et cela ne reflète pas votre code; car vous spécifiez une bordure inférieure sur votre cellule et ne spécifiez aucun style de bordure sur votre tableau.

après avoir regardé votre Plunkr, je ne vois pas votre problème; Cependant, j'ai noté que vous avez ajouté border-right: 1px solid black; à votre .table td . Veuillez mettre à jour votre question en fournissant une capture d'écran de ce que vous voyez; Dites-nous quel navigateur vous utilisez. Vérifiez également si ce problème est reproductible dans d'autres navigateurs / clients.

3 Réponses :

3
votes

Avant HTML 5, ajoutez les éléments suivants à votre tableau en tant qu'attributs:

.table {
    position: absolute;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
 }

 .table td {
    border-bottom: 1px solid;
    padding: 0px;
    margin: 0px;
    width: 100%;
    padding: 0px;
 }

Pour référence: https://www.w3schools.com/tags/att_table_cellpadding.asp https://www.w3schools.com/tags/att_table_cellspacing.asp p >

HTML5 nécessite css.

table {border-collapse: collapse; border-spacing: 0;}
th, td {padding: 0px;}

Donc pour votre cas:

cellpadding=0 cellspacing=0

Voir Fiddle: https://jsfiddle.net/jennifergoncalves/gtajLmqh/5/

2 commentaires

J'ai mis à jour l'éditeur mais j'ai toujours trouvé une bordure séparée pour div et table. Veuillez vérifier le lien plunker mis à jour plnkr.co/edit/PldyKf60e6Jey1In3lPy

Quel navigateur utilisez-vous?

2
votes

Essayez d'ajouter border-collapse: collapse a > à votre table:

comme ceci:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <table class="table">
        <tr>
          <td>First</td>
        </tr>
                <tr>
          <td>Second</td>
        </tr>
                <tr>
          <td>Third</td>
        </tr>
      </table>
    </div>
  </body>

</html>

Voici le code complet:

/* Styles go here */

.container{
  width: 250px;
  height: 250px;
  position: relative;
  border: 1px solid black;
}

.table{
  position: absolute;
  width: 100%;
  border-collapse: collapse; 
}

.table td{
  border-bottom: 1px solid;
  padding: 0px;
  margin: 0px;
  width: 100%;
}

* {
    margin: 0px;
    padding: 0px;
}

.table{
  position: absolute;
  width: 100%;
  border-collapse: collapse; 
}

1 commentaires

J'ai mis à jour l'éditeur mais j'ai toujours trouvé une bordure séparée pour div et table. Veuillez vérifier le lien plunker mis à jour plnkr.co/edit/PldyKf60e6Jey1In3lPy

2
votes

Vous pouvez supprimer l'espace supplémentaire autour des cellules du tableau en définissant:

<div class="container">
  <table class="table">
    <tr>
      <td>First</td>
    </tr>
    <tr>
      <td>Second</td>
    </tr>
    <tr>
      <td>Third</td>
    </tr>
  </table>
</div>

Il est défini sur border-collapse: séparé; par défaut, en savoir plus sur MDN .

.container {
  width: 250px;
  height: 250px;
  position: relative;
  border: 1px solid black;
}

.table {
  position: absolute;
  width: 100%;
  border-collapse: collapse; /*NEW*/
}

.table td {
  border-bottom: 1px solid;
  padding: 0px;
  margin: 0px;
  width: 100%;
}

* {
  margin: 0px;
  padding: 0px;
}

table {
  border-collapse: collapse;
}

4 commentaires

J'ai mis à jour l'éditeur mais j'ai toujours trouvé une bordure séparée pour div et table. Veuillez vérifier le lien plunker mis à jour plnkr.co/edit/PldyKf60e6Jey1In3lPy

@ManpritSinghSahota Il suffit de supprimer la bordure droite sur le td voir cette démo.

Si je supprime cette bordure, un espace vide s'affiche. Je veux supprimer cela.

@ManpritSinghSahota Il doit y avoir autre chose qui interfère, car la démo ci-dessus fonctionne bien.