web-dev-qa-db-fra.com

Modifier les tables d'amorçage de largeur de colonne

J'ai un site statique PHP sur lequel j'utilise Bootstrap. Les tables sont contrôlées par Bootstrap.

J'ai remarqué que je n'ai apparemment aucun contrôle sur la longueur des sections TD, de sorte que je puisse empêcher les numéros de téléphone, etc. Comme vous pouvez le constater, il y a beaucoup d'espace à la fin, mais vous ne savez pas comment l'étendre. 

J'ai essayé les largeurs en ligne sur le <th> mais rien ne se passe:

  <table class="table table-condensed table-striped  table-hover">
  <thead>
    <tr>
        <th>#</th>
        <th width="12%">Last Name</th>
        <th width="12%">First Name</th>
        <th width="12%">Spouse's Name</th>
        <th width="20%">Address</th>
        <th width="5%">City</th>
        <th  width="12%"class="did_phone">Phone</th>
        <th width="15%">E-Mail</th>
         <th width="15%"></th>
    </tr>
  </thead>
  <tbody>

Alors ... comment peut-on changer la largeur de <td>, faire des ajustements pour qu’il n’y ait pas d’emballage, dans Bootstrap?

twitter-bootstrapresizehtml-table
11
Norman Bird

Bootstrap crée des tables 100%. Donc, Tables th est défini sur 100%. La solution consiste à le rendre auto. Donc j'ai simplement écrasé Bootstrap en ajoutant ce qui suit à mon css:

table th {
    width: auto !important;
}

Et tout aligné parfaitement.

15
Norman Bird

Une solution rapide et facile consiste simplement à ajouter un "remplissage" aux balises au lieu des pourcentages de largeur réels. Je n'ai aucune expérience de Bootstrap, mais je suppose que vous pouvez créer un style CSS en ligne avec votre exemple ci-dessus ou même peut-être que votre propre page de styles CSS est liée à tout. Quoi qu'il en soit, j'ai créé un exemple pour vous.

DEMO

Dans la démo, je viens de créer un style CSS pour th, comme indiqué ci-dessous:

th{
    padding: 0px 0px 0px 50px;
}

Le remplissage donnera un espace entre tout ce qui est dans la ligne. En fait, si vous ajoutez ceci à chaque ligne, il restera toujours cohérent. Je vous encourage à jouer avec le violon pour découvrir ce qui vous convient le mieux!

La dernière option que je vous présente est celle-ci:

DEMO

Cet exemple utilise strictement uniquement la largeur. En fait, la méthode la plus simple consiste à définir une largeur totale pour le tableau, puis d’ajuster les balises with avec les balises th selon les besoins. Vous avez déjà vos pourcentages marqués (ce qui est une bonne idée), mais vous n’obtenez rien en réalité… pour le moment, vos balises th pensent qu’il existe une largeur de 0 car vous n’avez pas encore précisé la taille que vous souhaitez donner aux balises th. devenir. Jetons un coup d'oeil au code:

table{
    border: 1px solid black;
    width: 1000px;
}
th{
    width: 900px;
}

Vous pouvez voir que la table définit la largeur initiale, puis que th peut définir une largeur, en supposant qu'elle soit inférieure ou égale aux marges de la largeur de la table. Cela devrait résoudre tous les problèmes. Je vous ai donné deux options pour travailler :)

Une chose à noter, j’ai ajouté une bordure pour la table, cela la rendait plus lisible pour que je puisse exécuter la démo. Sortez-le si vous en avez besoin!

Bonne chance :)

1
BuddhistBeast

Vous pouvez essayer d'utiliser ce style = "width: 12%" dans chaque th.

Exemple:

<table class="table table-bordered">
 <thead>
 <tr>
    <th>#</th>
    <th style="width:12%">Last Name</th>
    <th style="width:12%">First Name</th>
    <th style="width:12%">Spouse's Name</th>
    <th style="width:20%">Address</th>
    <th style="width:5%">City</th>
    <th  style="width:12%"class="did_phone">Phone</th>
    <th style="width:15%">E-Mail</th>
 </tr>
 </thead>
 <tbody>
    <tr>
        <td>1</td>
        <td>Last Name</td>
        <td>First Name</td>
        <td>Spouse's Name</td>
        <td>Adress</td>
        <td>City</td>
        <td>Phone</td>
        <td>E-Mail</td>
    </tr>
 </tbody>
</table>
1
David Navarro Astudillo