twitter-bootstrap => tabeller

Anmärkningar

Innehållsordning och komplexa tabeller Se upp för att tabellen-återflödesstil ändrar innehållets visuella ordning. Se till att du bara använder den här stilen på välformade och enkla datatabeller (och i synnerhet inte använder det för layouttabeller) med lämpliga tabellhuvudceller för varje rad och kolumn.

Dessutom fungerar den här klassen inte korrekt för tabeller med celler som spänner över flera rader eller kolumner (med radspan eller kolspanattribut).

Grundläggande tabell

Bootstrap definierar en anpassad styling för bord med klassen .table . Lägg bara till .table i valfri <table> att se horisontella avdelare och stoppning:

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Bord med avancerad styling

Bootstrap erbjuder ett par klasser för avancerad bordstyling.

Randiga rader

Du kommer att ha ett bord med randiga rader, om du lägger till. .table-striped klass:

<table class="table table-striped">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Anteckna det:

Randiga tabeller utformas via :nth-child CSS-väljaren, som inte är tillgänglig i Internet Explorer 8.

Gränsat bord

Du kommer att ha en tabell med gränser på alla sidor av tabellen och cellerna, om du lägger till .table-bordered klass:

<table class="table table-bordered">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Håll muspekaren på raderna

Om du lägger till .table-hover klassen har du en tabell med markerade rader när användaren svävar över en rad:

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Kondensbord

Om du lägger till .table-condensed klass kommer standardcellstoppningen att skäras i hälften, så att du har ett mer kompakt bord:

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Kontextuella klasser

Bootstrap-tabeller stöder kontextuella färger. För att ändra bakgrundsfärg på en tabellrad eller cell måste du bara lägga till en av följande sammanhangsklasser: .active , .success , .info , .warning , .danger

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr class="success"><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td class="info">Bloggs</td></tr>
  </tbody>
</table>

Responsiva tabeller

Du måste linda in alla .table i html-behållare med .table-responsive class för att skapa responsiva tabeller:

<div class="table-responsive">
  <table class="table">
    <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
    <tbody>
      <tr><td>John</td><td>Doe</td></tr>
      <tr><td>Fred</td><td>Bloggs</td></tr>
    </tbody>
  </table>
</div>

Mottagande tabeller rullar horisontellt på små enheter (<768px). Det kommer inte att finnas några skillnader för skärmar större än 768px breda.

Tabellåterflöde - Vertikala rubriker

Få ett bord med vertikala rubriker.

Twitter bootstrap stöder nu vertikal rubrik i ett välformaterat normalt bord. För att uppnå detta använder du bara .table-reflow klassen

Använd twitter bootstrap .table-reflow klass på ett välformat bord för att få ett bord med vertikala rubriker. Dessutom kan du kombinera med att använda .table-striped och .table-hover för att sväva på kolumner den här gången.

<table class="table table-striped table-hover table-reflow">
    <thead>
        <tr>
            <th ><strong> First Name: </strong></th>
            <th ><strong> Last Name: </strong></th>
            <th ><strong> Email: </strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> John </td>
            <td> Doe </td>
            <td> [email protected] </td>
        </tr>
        <tr>
            <td> Joane </td>
            <td> Donald </td>
            <td> [email protected] </td>
        </tr>
    </tbody>
</table>

Du bör kontrollera v4-alfadokumenten här: twitter-bootstrap .table-reflow

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

twitter-bootstrap
tabeller

Sök…