web-dev-qa-db-fra.com

Largeur de cellule de tableau avec bootstrap

J'ai un tableau simple avec deux colonnes, je voudrais le pour définir la largeur de chacune de ces colonnes, par exemple la colonne de gauche 30% la colonne de droite 70%. Finalement, j'aurai des centaines de lignes, donc si je peux appliquer une classe css globale, je suppose que ce serait mieux?

Actuellement, la colonne de gauche est compressée et n'a pas l'air bien.

J'ai créé un jsfiddle si quelqu'un peut prêter de l'aide. 

<div class="container">
    <div class="row col-md-8">
        <table class="table table-striped">
            <tr>
                <td>row name here</td>
                <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget</td>
            </tr>
            <tr>
                <td>another row name here</td>
                <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egetsdsdfsdf fsdfsdf</td>></tr>
        </table>
    </div>
</div>
htmlcsstwitter-bootstrap
13
jonboy

Voici mon point de vue sur elle. J'ai ajouté un identifiant à la table pour un accès plus facile.

Le balisage 

<div class="container">
    <div class="row col-md-8">
        <table class="table table-striped" id="someid">
            <tr>
                <td>row name here</td>
                <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget</td>
            </tr>
            <tr>
                <td>another row name here</td>
                <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egetsdsdfsdf fsdfsdf</td>></tr>
        </table>
    </div>
</div>

Le CSS 

#someid tr td:nth-child(1){
    width:30%;
}

Fiddle

22
Krishanu Dey

Vous pouvez utiliser la propriété css table-layout: fixed Cela forcera la largeur donnée sur les colonnes:

table {
    table-layout: fixed;
}

td:first-child {
    width: 30%;
}
td:last-child {
    width: 70%;
}

Violon mis à jour

Normalement, vous attribuez la même largeur à chaque cellule de la colonne, mais avec table-layout: fixed, vous ne pouvez la définir que dans la cellule d'en-tête de la colonne:

<thead>
    <tr>
        <th class="first">Column A</th>
        <th class="second">Column B</th>
    </tr>
</thead>

Comme indiqué dans ce violon

7
jazZRo

quand j'ai essayé avec la propriété width sur la première td de tr cela fonctionne très bien pour moi

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="row col-md-8">
            <table class="table table-striped">
                <tr>
                    <td width="30%">row name here</td>
                    <td width="70%">sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget</td>
                </tr>
                <tr>
                    <td>another row name here</td>
                    <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egetsdsdfsdf fsdfsdf</td></tr>
            </table>
        </div>
    </div>

Conformément à la dernière mise à jour, l'attribut width dans td ne sera plus pris en charge. Vous devez donc définir width par css.

#someid tr td{
    width:30%;
}

en utilisant le code psudo:

#someid tr td:nth-child(1){
    width:30%;
}

quel est le problème que vous avez rencontré?

6
Butterfly

CSS:

table.table.table-striped tr > td:first-child {width:30%;}

1
Jason Williams

Définissez une propriété min-width pour votre propriété avec la classe nowrap, comme suit:

td.nowrap {
  min-width: 129px;
}

Mis à jour votre violon

0
Shane_Yo