web-dev-qa-db-fra.com

Bootstrap 3 Table à l'intérieur d'un panneau débordant

 <div class="col-xs-6 col-sm-4">
         <div class="panel panel-primary">
          <div class="panel-heading">Recently Filtered</div>
          <table class="table table-striped">
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
          </table>
        </div>
</div>

La table à l'intérieur d'un panneau déborde lorsque je fais un zoom avant, voici un exemple d'imageenter image description here

Quel est le balisage approprié pour répondre à ce problème? Je sais que ça peut évoluer correctement à coup sûr.

htmlcsshtml5css3twitter-bootstrap
29
Aaron

Vous pouvez toujours ajouter .table-responsive classe à la table pour la faire défiler horizontalement. Exemple:

<div class="table-responsive">
    <table class="table table-striped">
        ...
    </table>
</div>

Si ce n'est pas ce que vous voulez, vous devrez réduire la taille de la police pour mieux l'adapter.

56
South Paw

cela ne semble se produire que lorsque la fenêtre d'affichage a répondu aux tailles de mobile. La solution la plus simple consiste à ajouter la règle overflow.

.panel {
    overflow: auto;
}

vous pouvez également modifier la taille des polices ou supprimer les cellules de tableau inutiles. Vous pouvez également abréger

  • Identifiant
  • Temp
  • V
  • Rendez-vous amoureux
7
Todd

Juste une idée, vous avez essayé d'ajouter un div avec le corps du panneau de classe autour de la table?

1
Glaucius Zacher