28112 sujets

CSS et mise en forme, CSS3

Tableau scrollable

Bonjour,
j'ai un soucis sur un tableau scrollable. Il y a un espace qui se met entre le tableau et la barre de scroll. (voir image en bas)
Comment enlever cet espace ? merci

<table class="context-menu-one fixed_headers">
        <thead>
            <tr>
                <th class="col_interlocuteur">
                    Interlocuteur
                </th>
                <th class="col_currency">
                    Devise
                </th>
                <th class="col_active">
                    Active
                </th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td class="infos col_interlocuteur">
                        @Html.DisplayFor(modelItem => item.FirstNameInterlocutor)
                    </td>
                    <td class="col_currency">
                        @Html.DisplayFor(modelItem => item.Currency.Code)
                    </td>
                    <td class="col_active">
                        <img alt="non actif" src="~/Images/inactive.png"/>
                    </td>
                </tr>   
        </tbody>
</table>


table 
{
    border-collapse: collapse;
    font-size : 12px;
    width : 100%;
}

thead tr
{
    padding : 0 0 0 30px;
    display: block;
}

tbody
{
    display: block;
    height : 437px;
    width : 98%;
    overflow-x: hidden;
    overflow-y: scroll;
    padding : 0 0 0 30px;
}

th
{
    padding-left : 0;
    padding-right : 0;
    text-align :  left;
}

.col_interlocuteur
{
    width : 30%;
    min-width: 150px;
}

.col_currency
{
    width : 30%;
    min-width : 50px;
}
.col_active
{
    width : 40%;
    min-width : 50px;
}
upload/55454-yuifuioeri.jpg
Modifié par neka11 (17 Sep 2014 - 11:38)
Administrateur
Bonjour,

utilise l'autre algorithme de tableaux qui respecte les largeurs que tu indiques sans se soucier du contenu (peu, beaucoup, ça change les largeurs sinon), à savoir :
table {
    table-layout: fixed;
}
Bonjour,

Le problème vient sans doute des attributs css que tu fixes à ton élément tbody :

tbody
{
display: block;
height : 437px;
width : 98%;
overflow-x: hidden;
overflow-y: scroll;
padding : 0 0 0 30px;
}

Tu ne peux pas mixer du % et du px sinon tu es plus sur du 100% mais du 100% + 30 px ....

Bon courage

Edit : que dieu me pardonne mais j'ai retiré les balises CSS pour que les balises couleurs fonctionnent...
Modifié par mini-truc (22 Sep 2014 - 14:49)
Ma recommandation serait de rendre une élément conteneur (div ou whatever) scrollable plutôt que le tableau lui même. Les tables ont des comportements parfois exotiques.
Sujet clos
Aller à