spec/html/tables.html in patternfly-sass-3.2.0 vs spec/html/tables.html in patternfly-sass-3.3.0
- old
+ new
@@ -39,66 +39,11 @@
<div class="alert alert-warning">
<span class="pficon pficon-warning-triangle-o"></span>
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
</div>
<hr>
- <h2>Contextual classes</h2>
- <table class="table table-bordered">
- <thead>
- <tr>
- <th>#</th>
- <th>Column heading</th>
- <th>Column heading</th>
- <th>Column heading</th>
- </tr>
- </thead>
- <tbody>
- <tr class="active">
- <td>1</td>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- <tr class="success">
- <td>3</td>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- <tr>
- <td>4</td>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- <tr class="warning">
- <td>5</td>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- <tr>
- <td>6</td>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- <tr class="danger">
- <td>7</td>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- </tbody>
- </table>
- <h2>Responsive and bordered tables. Striped and hover rows.</h2>
+ <h2>PatternFly recommendation: Bootstrap striped, bordered, hover, and responsive</h2>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Session</th>
@@ -202,10 +147,11 @@
<td class="text-right">20126</td>
</tr>
</tbody>
</table>
</div>
+ <hr>
<h2>TreeGrid tables</h2>
<div class="table-responsive">
<table class="table table-bordered table-hover table-treegrid">
<thead>
<tr>
@@ -328,9 +274,267 @@
</table>
</div>
<script>
$('.table-treegrid').treegrid();
</script>
+ <hr>
+ <h2>Bootstrap examples</h2>
+ <h3>Basic example</h3>
+ <table class="table">
+ <caption>Optional table caption.</caption>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </table>
+ <h3>Striped rows</h3>
+ <table class="table table-striped">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </table>
+ <h3>Bordered table</h3>
+ <table class="table table-bordered">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </table>
+ <h3>Hover rows</h3>
+ <table class="table table-hover">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </table>
+ <h3>Condensed table</h3>
+ <table class="table table-condensed">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </table>
+ <h3>Contextual classes</h3>
+ <table class="table">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>Column heading</th>
+ <th>Column heading</th>
+ <th>Column heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="active">
+ <td>1</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="success">
+ <td>3</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr>
+ <td>4</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="warning">
+ <td>5</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr>
+ <td>6</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="danger">
+ <td>7</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ </tbody>
+ </table>
+ <h3>Responsive tables</h3>
+ <div class="table-responsive">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div><!-- /container -->
</body>
</html>