Bonjour, je code actuellement une application, et je rencontre deux petits soucis liés, je pense, au css. Le premier se trouve dans ma page de gestion des utilisateurs, on y trouve un tableau avec la liste des utilisateurs, et des actions à faire pour ces utilisateurs :

![(http://hpics.li/f84c69d])

Si l'image fonctionne, vous voyez qu'après le dernier bouton, le tableau continue alors qu'il n'y a rien à afficher, et je n'arrive pas à "stopper" l'affichage du tableau.

J'y met le code du tableau, et celui de mon css :

<table class="table table-striped">
        <thead>
        <tr>
            <th>ID</th>
            <th>Login</th>
            <th>Role</th>
            <th></th>
            <th>Action</th>
            <th></th>
            <th></th>
        </tr>
        </thead>
        <tbody>
            @foreach ($user as $users)
                <tr>
                    <td class="id"> {{$users->id}} </td>
                    <td class="text-primary login-text"><strong>{{ $users->name }}</strong></td>
                    <td class="roleu">{{ $users->role }}<td>
                            <td>
                                <a class="btn btn-success" href="{{ route('gestionUser.show', $users) }}">Voir</a>
                            </td>
                            <td>
                                <a class="btn btn-warning" href="{{ route('gestionUser.edit', $users) }}">Modifier</a>
                            </td>
                            <td class="action">{!! Form::open(['method' => 'DELETE', 'route' => ['gestionUser.destroy', $users->id]]) !!}
                                    {{ Form::submit('Supprimer', ['class' => 'btn btn-danger']) }}
                                {!! Form::close() !!}
                            </td>

                        <td></td>

                </tr>
            @endforeach
        </tbody>
    </table>
.id{
    width: 110px;
}
.login-text{
    width: 220px;
}
.action{
    width: 600px;
}

.roleu{
    width: 350px;
}

Du coup avez vous une idée de quoi marquer pour réduire la partie droite de mon tableau ?
Je m'excuse au passage si l'image n'est pas affichée, je mettrais un lien vers celle ci ^^

Merci d'avance

4 réponses


iGenezys
Auteur
Réponse acceptée

Si je l'entoure d'une div, genre col-md-10 alors le tableau se décalera vers le centre, mais restera "étendu" vers la droite comme sur les images

EDIT : C'est effectivement mieux si j'entoure ma table d'une div ET que je retire la largeur de 600px, désolé du coup, et merci ^^

Bonsoir.
Pour commencer, ce n'est pas étonnant que ton td ayant la classe action soit aussi large, puisque tu lui définis une largeur de 600px, (je trouves d'ailleurs que c'est énorme juste pour afficher un bouton de formulaire de cette taille).
Ensuite, j'ai l'impression que tu t'y perd entre tes th et tes td.

iGenezys
Auteur

Je me perds peut-être oui ^^ Je suis pas habitué aux tableaux. Ensuite, la largeur de 600px, même si elle parrait étonnante réduit l'espace entre les boutons, je te link une image sans ça :

![(http://hpics.li/767d044])

Après je me doute que c'était une erreur, mais c'est le seul moyen que j'avais trouvé pour réduire cet espace entre mes boutons ^^

Ta table, elle est dans une div qui fait combien de colonnes ? (vu que c'est du code de Bootstrap)
Si tu lui dit que tu veux que ton élément prenne la place de 12 colonnes, le framework ne vas pas te contredire, pareil si tu ne lui définis pas le nombre de colonnes que ton élément doit occuper.