mirror of
https://github.com/twbs/bootstrap.git
synced 2025-11-04 00:03:15 -05:00
Fixes to scope
as discssued in https://github.com/twbs/bootstrap/issues/15117#issuecomment-63029993 - added ``scope="row"`` to row headers - made sure row headers are actual ``<th>`` elements - removed ``scope="col"`` where it was redundant - simplified table examples with (to me) unnecessary ``rowspan``/``colspan`` (unless you really want complex tables, in which case we would need full-on ``id`` and ``headers`` attributes to make sure each table cell has an explicit association with the related header cells - overkill, in my opinion) - one table (in typography) left header-less, as it's more or less presentational (though its structure is still important, hence not adding ``role="presentation"``)
This commit is contained in:
Patrick H. Lauke
parent
7bdc307b70
commit
db4e5efb8f
@ -150,19 +150,19 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
@ -204,19 +204,19 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
|
||||
@ -68,49 +68,49 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="text-nowrap">Grid behavior</th>
|
||||
<th class="text-nowrap" scope="row">Grid behavior</th>
|
||||
<td>Horizontal at all times</td>
|
||||
<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">Container width</th>
|
||||
<th class="text-nowrap" scope="row">Container width</th>
|
||||
<td>None (auto)</td>
|
||||
<td>750px</td>
|
||||
<td>970px</td>
|
||||
<td>1170px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">Class prefix</th>
|
||||
<th class="text-nowrap" scope="row">Class prefix</th>
|
||||
<td><code>.col-xs-</code></td>
|
||||
<td><code>.col-sm-</code></td>
|
||||
<td><code>.col-md-</code></td>
|
||||
<td><code>.col-lg-</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap"># of columns</th>
|
||||
<th class="text-nowrap" scope="row"># of columns</th>
|
||||
<td colspan="4">12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">Column width</th>
|
||||
<th class="text-nowrap" scope="row">Column width</th>
|
||||
<td class="text-muted">Auto</td>
|
||||
<td>~62px</td>
|
||||
<td>~81px</td>
|
||||
<td>~97px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">Gutter width</th>
|
||||
<th class="text-nowrap" scope="row">Gutter width</th>
|
||||
<td colspan="4">30px (15px on each side of a column)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">Nestable</th>
|
||||
<th class="text-nowrap" scope="row">Nestable</th>
|
||||
<td colspan="4">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">Offsets</th>
|
||||
<th class="text-nowrap" scope="row">Offsets</th>
|
||||
<td colspan="4">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">Column ordering</th>
|
||||
<th class="text-nowrap" scope="row">Column ordering</th>
|
||||
<td colspan="4">Yes</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -32,28 +32,28 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>.visible-xs-*</code></th>
|
||||
<th scope="row"><code>.visible-xs-*</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.visible-sm-*</code></th>
|
||||
<th scope="row"><code>.visible-sm-*</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.visible-md-*</code></th>
|
||||
<th scope="row"><code>.visible-md-*</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.visible-lg-*</code></th>
|
||||
<th scope="row"><code>.visible-lg-*</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
@ -62,28 +62,28 @@
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>.hidden-xs</code></th>
|
||||
<th scope="row"><code>.hidden-xs</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.hidden-sm</code></th>
|
||||
<th scope="row"><code>.hidden-sm</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.hidden-md</code></th>
|
||||
<th scope="row"><code>.hidden-md</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.hidden-lg</code></th>
|
||||
<th scope="row"><code>.hidden-lg</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
@ -104,15 +104,15 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>.visible-*-block</code></td>
|
||||
<th scope="row"><code>.visible-*-block</code></th>
|
||||
<td><code>display: block;</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.visible-*-inline</code></td>
|
||||
<th scope="row"><code>.visible-*-inline</code></th>
|
||||
<td><code>display: inline;</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.visible-*-inline-block</code></td>
|
||||
<th scope="row"><code>.visible-*-inline-block</code></th>
|
||||
<td><code>display: inline-block;</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -134,7 +134,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
<th scope="row">
|
||||
<code>.visible-print-block</code><br>
|
||||
<code>.visible-print-inline</code><br>
|
||||
<code>.visible-print-inline-block</code>
|
||||
@ -143,7 +143,7 @@
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.hidden-print</code></th>
|
||||
<th scope="row"><code>.hidden-print</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
|
||||
@ -15,27 +15,27 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>lib/</code></th>
|
||||
<th scope="row"><code>lib/</code></th>
|
||||
<td>Ruby gem code (Sass configuration, Rails and Compass integrations)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>tasks/</code></th>
|
||||
<th scope="row"><code>tasks/</code></th>
|
||||
<td>Converter scripts (turning upstream Less to Sass)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>test/</code></th>
|
||||
<th scope="row"><code>test/</code></th>
|
||||
<td>Compilation tests</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>templates/</code></th>
|
||||
<th scope="row"><code>templates/</code></th>
|
||||
<td>Compass package manifest</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>vendor/assets/</code></th>
|
||||
<th scope="row"><code>vendor/assets/</code></th>
|
||||
<td>Sass, JavaScript, and font files</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>Rakefile</code></th>
|
||||
<th scope="row"><code>Rakefile</code></th>
|
||||
<td>Internal tasks, such as rake and convert</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -16,19 +16,19 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
@ -61,19 +61,19 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
@ -102,25 +102,21 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2">1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@TwBootstrap</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -147,20 +143,21 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -187,19 +184,19 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
@ -229,33 +226,33 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="row">
|
||||
<code>.active</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Applies the hover color to a particular row or cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="row">
|
||||
<code>.success</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Indicates a successful or positive action</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="row">
|
||||
<code>.info</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Indicates a neutral informative change or action</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="row">
|
||||
<code>.warning</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Indicates a warning that might need attention</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="row">
|
||||
<code>.danger</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Indicates a dangerous or potentially negative action</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -273,55 +270,55 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="active">
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="success">
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<th scope="row">4</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="info">
|
||||
<td>5</td>
|
||||
<th scope="row">5</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<th scope="row">6</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="warning">
|
||||
<td>7</td>
|
||||
<th scope="row">7</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<th scope="row">8</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="danger">
|
||||
<td>9</td>
|
||||
<th scope="row">9</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
@ -381,7 +378,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@ -390,7 +387,7 @@
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@ -399,7 +396,7 @@
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@ -426,7 +423,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@ -435,7 +432,7 @@
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@ -444,7 +441,7 @@
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Android</th>
|
||||
<th scope="row">Android</th>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
|
||||
@ -26,21 +26,21 @@
|
||||
<td class="text-muted">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>iOS</th>
|
||||
<th scope="row">iOS</th>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Mac OS X</th>
|
||||
<th scope="row">Mac OS X</th>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Windows</th>
|
||||
<th scope="row">Windows</th>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
@ -59,9 +59,9 @@
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="col-xs-4">Feature</th>
|
||||
<th scope="col" class="col-xs-4">Internet Explorer 8</th>
|
||||
<th scope="col" class="col-xs-4">Internet Explorer 9</th>
|
||||
<th class="col-xs-4">Feature</th>
|
||||
<th class="col-xs-4">Internet Explorer 8</th>
|
||||
<th class="col-xs-4">Internet Explorer 9</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user