Stosowanie stylów do tabel za pomocą Twittera Bootstrap

Question

Czy ktoś wie, czy możliwe jest stosowanie stylów na stołach przy użyciu Twitter Bootstrap? W niektórych starszych samouczkach mogę zobaczyć przykłady tabel, ale nie na samej stronie Bootstrap.

Próbowałem go skonfigurować ale stoliki w mojej strony mają prawie żadnej stylizacji do nich stosowane.

<table> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Language</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>Some</td> 
      <td>One</td> 
      <td>English</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>Joe</td> 
      <td>Sixpack</td> 
      <td>English</td> 
     </tr> 
    </tbody> 
</table> 

Jakich zajęć należy złożyć?

Answer 1

Bootstrap oferuje różne style stołów. Zajrzyj do Base CSS - Tables w celu uzyskania dokumentacji i przykładów.

Poniższa styl daje wspaniale wyglądające tabele:

<table class="table table-striped table-bordered table-condensed"> 
    ... 
</table> 

Answer 2

Można również stosować klasy tr: info, błąd, ostrzeżenie lub sukces.

Answer 3

Kolejny dobry stolik. Dodałem klasę "table-hover", ponieważ daje ona miły efekt zawieszania.

<h3>NATO Phonetic Alphabet</h3>  
    <table class="table table-striped table-bordered table-condensed table-hover"> 
    <thead> 
    <tr> 
     <th>Letter</th> 
     <th>Phonetic Letter</th> 

    </tr> 
    </thead> 
    <tr> 
    <th>A</th> 
    <th>Alpha</th> 

    </tr> 
    <tr> 
    <td>B</td> 
    <td>Bravo</td> 

    </tr> 
    <tr> 
    <td>C</td> 
    <td>Charlie</td> 

    </tr> 

</table> 

Answer 4

Tabele startowe Twittera mogą być stylizowane i dobrze zaprojektowane. Możesz nadać styl tabeli, dodając kilka klas do swojego stołu i będzie ładnie wyglądać. Można go używać w raportach danych, informacji pokazujących, itp

Można użyć:

basic table 
Striped rows 
Bordered table 
Hover rows 
Condensed table 
Contextual classes 
Responsive tables 

Rozłożony wiersze tabeli:

<table class="table table-striped" width="647"> 
    <thead> 
    <tr> 
    <th>#</th> 
    <th>Name</th> 
    <th>Address</th> 
    <th>mail</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>1</td> 
    <td>Thomas bell</td> 
    <td>Brick lane, London</td> 
    <td>thomas@yahoo.com</td> 
    </tr> 
    <tr> 
    <td height="29">2</td> 
    <td>Yan Chapel</td> 
    <td>Toronto Australia</td> 
    <td>Yan@yahoo.com</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>Pit Sampras</td> 
    <td>Berlin, Germany</td> 
    <td>Pit @yahoo.com</td> 
    </tr> 
    </tbody> 
    </table> 

Skrócone tabela:

zagęszczania tabela, do której należy dodać class class = "table table-condensed".

<table class="table table-condensed" width="647"> 
    <thead> 
    <tr> 
    <th>#</th> 
    <th>Sample Name</th> 
    <th>Address</th> 
    <th>Mail</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>1</td> 
    <td>Thomas bell</td> 
    <td>Brick lane, London</td> 
    <td>thomas@yahoo.com</td> 
    </tr> 
    <tr> 
    <td height="29">2</td> 
    <td>Yan Chapel</td> 
    <td>Toronto Australia</td> 
    <td>Yan@yahoo.com</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>Pit Sampras</td> 
    <td>Berlin, Germany</td> 
    <td>Pit @yahoo.com</td> 
    </tr> 
    <tr> 
    <td></td> 
    <td colspan="3" align="center"></td> 
    </tr> 
    </tbody> 
    </table> 

Ref: http://twitterbootstrap.org/twitter-bootstrap-table-example-tutorial

Answer 5

bootstrap oferuje różnorodne zajęcia dla tabeli

<table class="table"></table> 
<table class="table table-bordered"></table> 
<table class="table table-hover"></table> 
<table class="table table-condensed"></table> 
<table class="table table-responsive"></table> 

Answer 6

Możesz dodać klas kontekstowych do każdego wiersza w następujący sposób:

<tr class="table-success"></tr> 
<tr class="table-error"></tr> 
<tr class="table-warning"></tr> 
<tr class="table-info"></tr> 
<tr class="table-danger"></tr> 

Można również dodać je do tabeli danych takie same jak powyżej

Możesz ustawić rozmiar stołu, ustawiając klasy jako table-sm i tak dalej.

Możesz dodać niestandardowych klas i dodać własną stylistykę:

<table class="table"> 
    <thead style = "color:red;background-color:blue"> 
    <tr> 
     <th></th> 
     <th>First Name</th> 
     <th>Last Name</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Asdf</td> 
     <td>qwerty</td> 
    </tr> 
    </tbody> 
</table> 

ten sposób można dodać niestandardową stylizację. Pokazałem styl inline po prostu na przykład jak to działa, możesz dodawać klasy i wywoływać je w swoich css.