Bootstrap tablosu kapsayıcı genişliğini dolduramaz

Sayfalardan birinde basit bir tablo ile bootstrap (3.3.2) kullanarak bir web sitesi yazıyorum. Sadece bir kapsayıcıda basit bir başlık paneli ve bir başlık ve tablo içeren başka bir içerik kapsayıcım var. Bazı nedenlerle, metin kabın genişliğini doldurur, ancak tablo sola hizalanır ve sadece içerideki metnin gerektirdiği genişliği genişletir. Herhangi bir fikri olan var mı? Eğer Bootstrap documentation indications aşağıdaki değildir çünkü varBootstrap tablosu kapsayıcı genişliğini dolduramaz

Alkış

<html> 
    <head> 
    <title>Page title</title> 
    <link type="text/css" rel="stylesheet" href="bootstrap.min.css"> 
    </head> 
    <body> 

    <div class="navbar navbar-inverse navbar-static-top"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="index.html">Home</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse" > 
      <ul class="nav navbar-nav"> 
      <li><a class="navbar-brand" href="modules.html">Modules</a></li> 
      <li><a class="navbar-brand" href="sites.html">Sites</a></li> 
      <li><a class="navbar-brand" href="search.html">Search</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 

    <div class="container"> 
     <div class="page-header"> 
     <h2>Why won't the table align!?</h2> 
     </div> 

     <div class="table-responsive"> 
     <table> 
      <thead> 
      <th>Head1</th><th>Head2</th><th>Head3</th> 
      </thead> 
      <tbody> 
      <tr> 
       <td>Body1</td><td>Body2</td><td>Body3</td> 
      </tr> 
      <tr> 
       <td>Body1</td><td>Body2</td><td>Body3</td> 
      </tr> 
      <tr> 
       <td>Body1</td><td>Body2</td><td>Body3</td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 
    </body> 
</html>

kaynak

2015-02-05 radpotato

tablo etiketine 'duyarlı tablo tablo' sınıfların ekleyip içine masa-başlığındaki etiketleri kaplanmasını: Hala kabın genişliğini doldurmak yapmak için kabul cevabı kullanmak zorunda etiketi! –

... Ben tabloya bir genişlik = "100%" ekleyebilirsiniz biliyorum, ama bu önyükleme davranışı varsayılan edilmelidir.

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

kaynak

2015-02-05 08:20:11 Guillaume

Ben lanetleneceğim! ... elbette her seferinde böyle yapmadım. – Mayhem

Bu cevap yanlış. Http://getbootstrap.com/css/#tables adresindeki dokümanlara göre, tabloya duyarlı sınıfın, tabloyu sarmalayan bir üst tarafa yerleştirilmesi gerekir.

...

– somecallitblues

@somecallitblues Bu cevap çok eskidir ve yazma sırasında farklıydı, güncelleyeceğim. – Guillaume

kullanmak yerine: Böyle, .table-responsive sınıfla bir sarıcı <div> içinde .table sınıfında ile table elemanı sarmak zorunda

<div class="table-responsive">

kullanmalısınız:

<table class="table table-responsive">

JSFiddle

kaynak

2015-02-05 08:20:54 atastrumf

En basit kelimelerde!

( 768px altında) onları küçük cihazlarda yatay kaydırma yapmak için herhangi .table .table-responsive sarılarak, duyarlı tablolar oluşturun. 768px genişliğinden büyük görüntülenen görüntülendiğinde, bu tablolarda hiçbir fark görmezsiniz.

İhtiyaçlarınız .table Yani

ve .table-responsive size yardımcı olacaktır.

kaynak

2015-02-05 08:21:50 Junaid

Etikete bootstraps sınıfı "tablo" eklemeye çalışın.

<table class="table"> 
     <thead> 
     <th>Head1</th><th>Head2</th><th>Head3</th> 
     </thead> 
     <tbody> 
     <tr> 
      <td>Body1</td><td>Body2</td><td>Body3</td> 
     </tr> 
     <tr> 
      <td>Body1</td><td>Body2</td><td>Body3</td> 
     </tr> 
     <tr> 
      <td>Body1</td><td>Body2</td><td>Body3</td> 
     </tr> 
     </tbody> 
    </table>

kaynak

2015-02-05 08:26:29

kabul yanıt doğru değil. docs Başına

(768px altında) onları küçük cihazlarda yatay kaydırma yapmak için .table duyarlı herhangi .table sarma tarafından duyarlı tablolar oluşturun. 768 piksel genişliğinden daha büyük bir şey görüntülerken, bu tablolarda herhangi bir fark görmezsiniz.

Sonra da <table>

http://getbootstrap.com/css/#tables-responsive

kaynak

2017-02-25 05:21:29 dbinott

NOT .table sınıf olması gerekir doğru kullanım

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

göstermek için gider: Eğer önyükleme v4 alfa kullanıyorsanız, documentation, kullanabileceğinizi söylüyor olsa bile:

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

kaynak

2017-03-30 17:36:16 GuilPejon

Bootstrap tablosu kapsayıcı genişliğini dolduramaz

cevap

İlgili konular