@extends('layout.master') @push('plugin-styles') {!! Html::style('assets/css/tables/tables.css') !!} @endpush @section('content')
{{__('For basic styling—light padding and only horizontal dividers—add the base class')}} .table
to any <table>
.
# | {{__('First Name')}} | {{__('Last Name')}} | {{__('Username')}} |
---|---|---|---|
1 | {{__('Mark')}} | {{__('Otto')}} | {{__('@mdo')}} |
2 | {{__('Jacob')}} | {{__('Thornton')}} | {{__('@fat')}}@fat |
3 | {{__('Larry')}} | {{__('the Bird')}} | {{__('@twitter')}} |
{{__('You can also invert the colors—with light text on dark backgrounds—with ')}}.table-dark
.
# | {{__('First Name')}} | {{__('Last Name')}} | {{__('Username')}} |
---|---|---|---|
1 | {{__('Mark')}} | {{__('Otto')}} | {{__('@mdo')}} |
2 | {{__('Jacob')}}Jacob | {{__('Thornton')}} | {{__('@fat')}} |
3 | {{__('Larry')}} | {{__('the Bird')}} | {{__('@twitter')}} |
{{__('Use one of two modifier classes to make')}} <thead>
s {{__('appear light or dark gray.')}}
# | {{__('First Name')}} | {{__('Last Name')}} | {{__('Username')}} |
---|---|---|---|
1 | {{__('Mark')}} | {{__('Otto')}} | {{__('@mdo')}} |
2 | {{__('Jacob')}} | {{__('Thornton')}} | {{__('@fat')}} |
3 | {{__('Larry')}} | {{__('the Bird')}} | {{__('@twitter')}} |
{{__('Use')}} .table-striped
{{__('to add zebra-striping to any table row within the')}}
<tbody>
.
# | {{__('First Name')}} | {{__('Last Name')}} | {{__('Username')}} |
---|---|---|---|
1 | {{__('Mark')}} | {{__('Otto')}} | {{__('@mdo')}} |
2 | {{__('Jacob')}} | {{__('Thornton')}} | {{__('@fat')}} |
3 | {{__('Larry')}} | {{__('the Bird')}} | {{__('@twitter')}} |
{{__('Add')}} .table-bordered
{{__('for borders on all sides of the table and cells.')}}
# | {{__('First Name')}} | {{__('Last Name')}} | {{__('Username')}} |
---|---|---|---|
1 | {{__('Mark')}} | {{__('Otto')}} | {{__('@mdo')}} |
2 | {{__('Mark')}} | {{__('Otto')}} | {{__('@TwBootstrap')}} |
3 | {{__('Jacob')}} | {{__('Thornton')}} | {{__('@fat')}} |
4 | {{__('Larry the Bird')}} | {{__('@twitter')}} |
{{__('Create responsive tables by wrapping any ')}}.table
in .table-responsive
{{__('to make them scroll horizontally on small devices (under 768px).')}}
# | {{__('First Name')}} | {{__('Last Name')}} | {{__('Username')}} |
---|---|---|---|
1 | {{__('Mark')}} | {{__('Otto')}} | {{__('@mdo')}} |
2 | {{__('Jacob')}} | {{__('Thornton')}} | {{__('@fat')}} |
3 | {{__('Larry the Bird')}} | {{__('@twitter')}} |
{{__('Add')}} .table-sm
{{__('to make tables more compact by cutting cell padding in half.')}}
# | {{__('First Name')}} | {{__('Last Name')}} | {{__('Username')}} |
---|---|---|---|
1 | {{__('Mark')}} | {{__('Otto')}} | {{__('@mdo')}} |
2 | {{__('Jacob')}} | {{__('Thornton')}} | {{__('@fat')}} |
3 | {{__('Larry the Bird')}} | {{__('@twitter')}} | |
4 | {{__('Column content')}} | {{__('Column content')}} | {{__('Column content')}} |
5 | {{__('Column content')}} | {{__('Column content')}} | {{__('Column content')}} |
6 | {{__('Column content')}} | {{__('Column content')}} | {{__('Column content')}} |
7 | {{__('Column content')}} | {{__('Column content')}} | {{__('Column content')}} |
8 | {{__('Column content')}} | {{__('Column content')}} | {{__('Column content')}} |
9 | {{__('Column content')}} | {{__('Column content')}} | {{__('Column content')}} |
{{__('Use contextual classes to color table rows or individual cells.')}}
# | {{__('Heading 1')}} | {{__('Heading 2')}} | {{__('Heading 3')}} |
---|---|---|---|
1 | {{__('Column content')}} | {{__('Column content')}} | {{__('Column content')}} |
3 | {{__('Column content')}} | {{__('Column content')}} | {{__('Column content')}} |
5 | {{__('Column content')}} | {{__('Column content')}} | {{__('Column content')}} |
7 | {{__('Column content')}} | {{__('Column content')}} | {{__('Column content')}} |
9 | {{__('Column content')}} | {{__('Column content')}} | {{__('Column content')}} |
{{__('A')}} caption
{{__('functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.')}}
# | {{__('First Name')}} | {{__('Last Name')}} | {{__('Username')}} |
---|---|---|---|
1 | {{__('Mark')}} | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
.table
in .table-responsive
to {{__('make them scroll horizontally on small devices (under 768px).')}}# | {{__('First Name')}} | {{__('Last Name')}} | {{__('Username')}} |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
{{__('Name')}} | {{__('Place')}} | {{__('Status')}} | {{__('Action')}} |
---|---|---|---|
Shaun | Sydney | {{__('Approved')}} | |
Alma | Zurich | {{__('Working')}} | |
Praveen | Kolkata | {{__('Suspended')}} | |
Santos | Rio | {{__('Hi')}}Blocked | |
Chris | Barbados | {{__('On leave')}} |
|
{{__('Name')}} |
{{__('Date')}} |
{{__('Progress')}} |
{{__('Team')}} |
{{__('Status')}} |
{{__('Rating')}} |
{{__('Action')}} |
---|---|---|---|---|---|---|---|
|
{{__('Android App Development')}} | {{__('Jun 20, 2018')}} |
|
{{__('Ongoing')}} |
5
![]() |
||
|
{{__('Angular Frontend')}} | Aug 23, 2019 |
|
{{__('Hold')}} |
4
![]() |
||
|
{{__('Java Backend')}} | {{__('Feb 20, 2018')}} |
|
{{__('Completed')}} |
4
![]() |
||
|
{{__('AWS Server Migration')}} | {{__('Sep 20, 2018')}} |
|
{{__('Pending')}} |
1
![]() |
||
|
{{__('Firbase Backup')}} | {{__('Jan 20, 2020')}} |
|
{{__('Cancelled')}} |
2
![]() |
||
|
{{__('iOS Swift')}} | {{__('Jun 20, 2017')}} |
|
{{__('Ongoing')}} |
4
![]() |