POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/css/tables.html

   1 <div class="bs-docs-section">
   2   <h1 id="tables" class="page-header">Tables</h1>
   3
   4   <h2 id="tables-example">Basic example</h2>
   5   <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
   6   <div class="bs-example" data-example-id="simple-table">
   7     <table class="table">
   8       <caption>Optional table caption.</caption>
   9       <thead>
  10         <tr>
  11           <th>#</th>
  12           <th>First Name</th>
  13           <th>Last Name</th>
  14           <th>Username</th>
  15         </tr>
  16       </thead>
  17       <tbody>
  18         <tr>
  19           <th scope="row">1</th>
  20           <td>Mark</td>
  21           <td>Otto</td>
  22           <td>@mdo</td>
  23         </tr>
  24         <tr>
  25           <th scope="row">2</th>
  26           <td>Jacob</td>
  27           <td>Thornton</td>
  28           <td>@fat</td>
  29         </tr>
  30         <tr>
  31           <th scope="row">3</th>
  32           <td>Larry</td>
  33           <td>the Bird</td>
  34           <td>@twitter</td>
  35         </tr>
  36       </tbody>
  37     </table>
  38   </div><!-- /example -->
  39 {% highlight html %}
  40 <table class="table">
  41   ...
  42 </table>
  43 {% endhighlight %}
  44
  45
  46   <h2 id="tables-striped">Striped rows</h2>
  47   <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
  48   <div class="bs-callout bs-callout-danger" id="callout-tables-striped-ie8">
  49     <h4>Cross-browser compatibility</h4>
  50     <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p>
  51   </div>
  52   <div class="bs-example" data-example-id="striped-table">
  53     <table class="table table-striped">
  54       <thead>
  55         <tr>
  56           <th>#</th>
  57           <th>First Name</th>
  58           <th>Last Name</th>
  59           <th>Username</th>
  60         </tr>
  61       </thead>
  62       <tbody>
  63         <tr>
  64           <th scope="row">1</th>
  65           <td>Mark</td>
  66           <td>Otto</td>
  67           <td>@mdo</td>
  68         </tr>
  69         <tr>
  70           <th scope="row">2</th>
  71           <td>Jacob</td>
  72           <td>Thornton</td>
  73           <td>@fat</td>
  74         </tr>
  75         <tr>
  76           <th scope="row">3</th>
  77           <td>Larry</td>
  78           <td>the Bird</td>
  79           <td>@twitter</td>
  80         </tr>
  81       </tbody>
  82     </table>
  83   </div><!-- /example -->
  84 {% highlight html %}
  85 <table class="table table-striped">
  86   ...
  87 </table>
  88 {% endhighlight %}
  89
  90
  91   <h2 id="tables-bordered">Bordered table</h2>
  92   <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
  93   <div class="bs-example" data-example-id="bordered-table">
  94     <table class="table table-bordered">
  95       <thead>
  96         <tr>
  97           <th>#</th>
  98           <th>First Name</th>
  99           <th>Last Name</th>
 100           <th>Username</th>
 101         </tr>
 102       </thead>
 103       <tbody>
 104         <tr>
 105           <th scope="row">1</th>
 106           <td>Mark</td>
 107           <td>Otto</td>
 108           <td>@mdo</td>
 109         </tr>
 110         <tr>
 111           <th scope="row">2</th>
 112           <td>Jacob</td>
 113           <td>Thornton</td>
 114           <td>@fat</td>
 115         </tr>
 116         <tr>
 117           <th scope="row">3</th>
 118           <td>Larry</td>
 119           <td>the Bird</td>
 120           <td>@twitter</td>
 121         </tr>
 122       </tbody>
 123     </table>
 124   </div><!-- /example -->
 125 {% highlight html %}
 126 <table class="table table-bordered">
 127   ...
 128 </table>
 129 {% endhighlight %}
 130
 131
 132   <h2 id="tables-hover-rows">Hover rows</h2>
 133   <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
 134   <div class="bs-example" data-example-id="hoverable-table">
 135     <table class="table table-hover">
 136       <thead>
 137         <tr>
 138           <th>#</th>
 139           <th>First Name</th>
 140           <th>Last Name</th>
 141           <th>Username</th>
 142         </tr>
 143       </thead>
 144       <tbody>
 145         <tr>
 146           <th scope="row">1</th>
 147           <td>Mark</td>
 148           <td>Otto</td>
 149           <td>@mdo</td>
 150         </tr>
 151         <tr>
 152           <th scope="row">2</th>
 153           <td>Jacob</td>
 154           <td>Thornton</td>
 155           <td>@fat</td>
 156         </tr>
 157         <tr>
 158           <th scope="row">3</th>
 159           <td>Larry</td>
 160           <td>the Bird</td>
 161           <td>@twitter</td>
 162         </tr>
 163       </tbody>
 164     </table>
 165   </div><!-- /example -->
 166 {% highlight html %}
 167 <table class="table table-hover">
 168   ...
 169 </table>
 170 {% endhighlight %}
 171
 172
 173   <h2 id="tables-condensed">Condensed table</h2>
 174   <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
 175   <div class="bs-example" data-example-id="condensed-table">
 176     <table class="table table-condensed">
 177       <thead>
 178         <tr>
 179           <th>#</th>
 180           <th>First Name</th>
 181           <th>Last Name</th>
 182           <th>Username</th>
 183         </tr>
 184       </thead>
 185       <tbody>
 186         <tr>
 187           <th scope="row">1</th>
 188           <td>Mark</td>
 189           <td>Otto</td>
 190           <td>@mdo</td>
 191         </tr>
 192         <tr>
 193           <th scope="row">2</th>
 194           <td>Jacob</td>
 195           <td>Thornton</td>
 196           <td>@fat</td>
 197         </tr>
 198         <tr>
 199           <th scope="row">3</th>
 200           <td colspan="2">Larry the Bird</td>
 201           <td>@twitter</td>
 202         </tr>
 203       </tbody>
 204     </table>
 205   </div><!-- /example -->
 206 {% highlight html %}
 207 <table class="table table-condensed">
 208   ...
 209 </table>
 210 {% endhighlight %}
 211
 212
 213   <h2 id="tables-contextual-classes">Contextual classes</h2>
 214   <p>Use contextual classes to color table rows or individual cells.</p>
 215   <div class="table-responsive">
 216     <table class="table table-bordered table-striped">
 217       <colgroup>
 218         <col class="col-xs-1">
 219         <col class="col-xs-7">
 220       </colgroup>
 221       <thead>
 222         <tr>
 223           <th>Class</th>
 224           <th>Description</th>
 225         </tr>
 226       </thead>
 227       <tbody>
 228         <tr>
 229           <th scope="row">
 230             <code>.active</code>
 231           </th>
 232           <td>Applies the hover color to a particular row or cell</td>
 233         </tr>
 234         <tr>
 235           <th scope="row">
 236             <code>.success</code>
 237           </th>
 238           <td>Indicates a successful or positive action</td>
 239         </tr>
 240         <tr>
 241           <th scope="row">
 242             <code>.info</code>
 243           </th>
 244           <td>Indicates a neutral informative change or action</td>
 245         </tr>
 246         <tr>
 247           <th scope="row">
 248             <code>.warning</code>
 249           </th>
 250           <td>Indicates a warning that might need attention</td>
 251         </tr>
 252         <tr>
 253           <th scope="row">
 254             <code>.danger</code>
 255           </th>
 256           <td>Indicates a dangerous or potentially negative action</td>
 257         </tr>
 258       </tbody>
 259     </table>
 260   </div>
 261   <div class="bs-example" data-example-id="contextual-table">
 262     <table class="table">
 263       <thead>
 264         <tr>
 265           <th>#</th>
 266           <th>Column heading</th>
 267           <th>Column heading</th>
 268           <th>Column heading</th>
 269         </tr>
 270       </thead>
 271       <tbody>
 272         <tr class="active">
 273           <th scope="row">1</th>
 274           <td>Column content</td>
 275           <td>Column content</td>
 276           <td>Column content</td>
 277         </tr>
 278         <tr>
 279           <th scope="row">2</th>
 280           <td>Column content</td>
 281           <td>Column content</td>
 282           <td>Column content</td>
 283         </tr>
 284         <tr class="success">
 285           <th scope="row">3</th>
 286           <td>Column content</td>
 287           <td>Column content</td>
 288           <td>Column content</td>
 289         </tr>
 290         <tr>
 291           <th scope="row">4</th>
 292           <td>Column content</td>
 293           <td>Column content</td>
 294           <td>Column content</td>
 295         </tr>
 296         <tr class="info">
 297           <th scope="row">5</th>
 298           <td>Column content</td>
 299           <td>Column content</td>
 300           <td>Column content</td>
 301         </tr>
 302         <tr>
 303           <th scope="row">6</th>
 304           <td>Column content</td>
 305           <td>Column content</td>
 306           <td>Column content</td>
 307         </tr>
 308         <tr class="warning">
 309           <th scope="row">7</th>
 310           <td>Column content</td>
 311           <td>Column content</td>
 312           <td>Column content</td>
 313         </tr>
 314         <tr>
 315           <th scope="row">8</th>
 316           <td>Column content</td>
 317           <td>Column content</td>
 318           <td>Column content</td>
 319         </tr>
 320         <tr class="danger">
 321           <th scope="row">9</th>
 322           <td>Column content</td>
 323           <td>Column content</td>
 324           <td>Column content</td>
 325         </tr>
 326       </tbody>
 327     </table>
 328   </div><!-- /example -->
 329 {% highlight html %}
 330 <!-- On rows -->
 331 <tr class="active">...</tr>
 332 <tr class="success">...</tr>
 333 <tr class="warning">...</tr>
 334 <tr class="danger">...</tr>
 335 <tr class="info">...</tr>
 336
 337 <!-- On cells (`td` or `th`) -->
 338 <tr>
 339   <td class="active">...</td>
 340   <td class="success">...</td>
 341   <td class="warning">...</td>
 342   <td class="danger">...</td>
 343   <td class="info">...</td>
 344 </tr>
 345 {% endhighlight %}
 346   <div class="bs-callout bs-callout-warning" id="callout-tables-context-accessibility">
 347     <h4>Conveying meaning to assistive technologies</h4>
 348     <p>Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
 349   </div>
 350
 351   <h2 id="tables-responsive">Responsive tables</h2>
 352   <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
 353
 354   <div class="bs-callout bs-callout-warning" id="callout-tables-responsive-overflow">
 355     <h4>Vertical clipping/truncation</h4>
 356     <p>Responsive tables make use of <code>overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.</p>
 357   </div>
 358   <div class="bs-callout bs-callout-warning" id="callout-tables-responsive-ff-fieldset">
 359     <h4>Firefox and fieldsets</h4>
 360     <p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
 361 {% highlight css %}
 362 @-moz-document url-prefix() {
 363   fieldset { display: table-cell; }
 364 }
 365 {% endhighlight %}
 366     <p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
 367   </div>
 368
 369   <div class="bs-example" data-example-id="simple-responsive-table">
 370     <div class="table-responsive">
 371       <table class="table">
 372         <thead>
 373           <tr>
 374             <th>#</th>
 375             <th>Table heading</th>
 376             <th>Table heading</th>
 377             <th>Table heading</th>
 378             <th>Table heading</th>
 379             <th>Table heading</th>
 380             <th>Table heading</th>
 381           </tr>
 382         </thead>
 383         <tbody>
 384           <tr>
 385             <th scope="row">1</th>
 386             <td>Table cell</td>
 387             <td>Table cell</td>
 388             <td>Table cell</td>
 389             <td>Table cell</td>
 390             <td>Table cell</td>
 391             <td>Table cell</td>
 392           </tr>
 393           <tr>
 394             <th scope="row">2</th>
 395             <td>Table cell</td>
 396             <td>Table cell</td>
 397             <td>Table cell</td>
 398             <td>Table cell</td>
 399             <td>Table cell</td>
 400             <td>Table cell</td>
 401           </tr>
 402           <tr>
 403             <th scope="row">3</th>
 404             <td>Table cell</td>
 405             <td>Table cell</td>
 406             <td>Table cell</td>
 407             <td>Table cell</td>
 408             <td>Table cell</td>
 409             <td>Table cell</td>
 410           </tr>
 411         </tbody>
 412       </table>
 413     </div><!-- /.table-responsive -->
 414
 415     <div class="table-responsive">
 416       <table class="table table-bordered">
 417         <thead>
 418           <tr>
 419             <th>#</th>
 420             <th>Table heading</th>
 421             <th>Table heading</th>
 422             <th>Table heading</th>
 423             <th>Table heading</th>
 424             <th>Table heading</th>
 425             <th>Table heading</th>
 426           </tr>
 427         </thead>
 428         <tbody>
 429           <tr>
 430             <th scope="row">1</th>
 431             <td>Table cell</td>
 432             <td>Table cell</td>
 433             <td>Table cell</td>
 434             <td>Table cell</td>
 435             <td>Table cell</td>
 436             <td>Table cell</td>
 437           </tr>
 438           <tr>
 439             <th scope="row">2</th>
 440             <td>Table cell</td>
 441             <td>Table cell</td>
 442             <td>Table cell</td>
 443             <td>Table cell</td>
 444             <td>Table cell</td>
 445             <td>Table cell</td>
 446           </tr>
 447           <tr>
 448             <th scope="row">3</th>
 449             <td>Table cell</td>
 450             <td>Table cell</td>
 451             <td>Table cell</td>
 452             <td>Table cell</td>
 453             <td>Table cell</td>
 454             <td>Table cell</td>
 455           </tr>
 456         </tbody>
 457       </table>
 458     </div><!-- /.table-responsive -->
 459   </div><!-- /example -->
 460 {% highlight html %}
 461 <div class="table-responsive">
 462   <table class="table">
 463     ...
 464   </table>
 465 </div>
 466 {% endhighlight %}
 467 </div>