Bootstrap grille à l'intérieur d'un TD

J'ai une table avec une colonne qui contient une grille de données dans un seul TD:

1   $1,234.56

2    de 2 000$.00

11  de 8 000$.00

Plutôt que de spécifier une table à l'intérieur de la TD, j'ai tenté d'utiliser le Bootstrap 3 classes de grille. Cela a très bien fonctionné lors de ma table était petite, mais l'ajout de la grille pour une table plus grande (avec plusieurs colonnes) se comporte différemment. Lorsque la table a trop de colonnes, mes deux colonne de la grille à l'intérieur de la TD est d'emballage et ressemble à une colonne de la grille comme suit:

1
$1,234.56
2
De 2 000$.00
11
De 8 000$.00

Le code que j'utilise est semblable à cela, si les besoins de plusieurs colonnes pour témoin le problème. Plein JSFiddle exemple ici.

<table class="table">
<thead>
    <tr>
        <th>Header 1</th>
        <th>Header for 2 column grid</th>
    </tr>
<tbody>
    <tr>
        <td>
            Some content
        </td>
        <td>
            <div class="row">
                <div class="col-sm-2">1</div>
                <div class="col-sm-10">1,234.56</div>
            </div>
            <div class="row">
                <div class="col-sm-2">13</div>
                <div class="col-sm-10">8,000.00</div>
            </div>
        </td>
    </tr>
</tbody>
</table>

Quelqu'un a une meilleure suggestion pour préserver mes deux colonne de la grille dans mon TD, à l'aide de Bootstrap ou autrement?

Plutôt que de spécifier une table à l'intérieur de la TD, j'ai tenté d'utiliser le Bootstrap 3 classes de grille. Pourquoi? Cela ressemble à des données tabulaires.
J'ai utilisé traditionnellement tables imbriquées pour la mise en page, mais je vais essayer d'élargir mes horizons. Oui, cette colonne contient des données tabulaires, mais il ne semble pas approprié d'utiliser le poids d'une table dans chaque ligne unique pour les deux colonnes de la grille. J'ai été d'explorer la sémantique des classes et suis en train de définir une structure générique pour gérer le simple "clé: valeur" scénario que l'on rencontre parfois dans nos tableaux.

OriginalL'auteur Bart | 2014-09-08

  1. 5

    modifier votre code HTML à

        <td style="white-space:nowrap">
        <div class="row">
            <div class="col-xs-2">1</div>
            <div class="col-xs-10">1,000.00</div>
        </div>
        <div class="row">
            <div class="col-xs-2">2</div>
            <div class="col-xs-10">1,582.99</div>
        </div>
    </td>

    et ajoutez cette ligne à votre fichier CSS:

    .row .col-xs-2, .row .col-xs-10{display:inline-block; float: none}

    voir tripoter ici

    Ooh, il semble que ça fera l'affaire. Merci pour votre aide Fabio!

    OriginalL'auteur Devin

  2. 0

    Changement col-sm-... à col-xs-....

    Mais @George Cummins suggestion devrait également être envisagée.

    Merci. J'ai fait donner un coup de cette, mais malheureusement ce n'ai pas très bien moi non plus.

    OriginalL'auteur mkutyba

  3. 0

    Que George a dit que j'avais utiliser uniquement des classes de bootstrap,

    utilisation container (ou de la coutume à la ligne) au lieu de table,

    rows pour tr ,

    et enfin, vous divisez vos lignes dans les colonnes (col-sm-2 - col-sm-10) au lieu de td (ou th)

    Je ne préfère continuer à utiliser le tableau pour l'ensemble des données tabulaires, comme il y a d'autres styles et de bonté qui vont de pair avec elle que je voudrais continuer à effet de levier.
    ça a du sens , de toute façon souvenir de classe de bootstrap sont plus orientés vers la réactivité (largeurs sont définies avec l' %),
    Grâce maioman. Oui, je suis assez nouveau à l'ensemble de Bootstrap chose et je suis juste de commencer à obtenir le blocage de celui-ci, donc je ne l'apprécie le rappel et les pointeurs 🙂

    OriginalL'auteur maioman

  4. 0

    Cela a fonctionné pour moi:

    td .row { margin-right: 0 !important; }

    OriginalL'auteur user2444499