テーブル
例
striped、bordered、hoverプロップを使用してテーブルをカスタマイズします。
結果
読み込み中...
ライブエディター
import Table from 'react-bootstrap/Table';function BasicExample() {return (<Table striped bordered hover><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><td>3</td><td colSpan={2}>Larry the Bird</td><td>@twitter</td></tr></tbody></Table>);}export default BasicExample;
小さなテーブル
size="sm" を使用して、セルパディングを半分にすることでテーブルをコンパクトにします。
結果
読み込み中...
ライブエディター
import Table from 'react-bootstrap/Table';function SmallExample() {return (<Table striped bordered hover size="sm"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><td>3</td><td colSpan={2}>Larry the Bird</td><td>@twitter</td></tr></tbody></Table>);}export default SmallExample;
ダークテーブル
variant="dark" を使用してテーブルの色を反転させ、暗い背景に明るいテキストを表示します。
結果
読み込み中...
ライブエディター
import Table from 'react-bootstrap/Table';function DarkExample() {return (<Table striped bordered hover variant="dark"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><td>3</td><td colSpan={2}>Larry the Bird</td><td>@twitter</td></tr></tbody></Table>);}export default DarkExample;
縞模様の行
striped を使用して、テーブル内の任意のテーブル行にゼブラストライプを追加します。
結果
読み込み中...
ライブエディター
import Table from 'react-bootstrap/Table';function StripedRowExample() {return (<Table striped><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><td>3</td><td colSpan={2}>Larry the Bird</td><td>@twitter</td></tr></tbody></Table>);}export default StripedRowExample;
縞模様の列
striped="columns" を使用して、任意のテーブル列にゼブラストライプを追加します。
結果
読み込み中...
ライブエディター
import Table from 'react-bootstrap/Table';function StripedColumnsExample() {return (<Table striped="columns"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><td>3</td><td colSpan={2}>Larry the Bird</td><td>@twitter</td></tr></tbody></Table>);}export default StripedColumnsExample;
レスポンシブ
レスポンシブテーブルを使用すると、テーブルを簡単に水平スクロールできます。
常にレスポンシブ
すべてのブレークポイントで、水平スクロール可能なテーブルにresponsiveを使用します。レスポンシブテーブルは自動的にdivでラップされます。次の例には、水平スクロール可能な12列があります。
結果
読み込み中...
ライブエディター
import Table from 'react-bootstrap/Table';function ResponsiveExample() {return (<Table responsive><thead><tr><th>#</th>{Array.from({ length: 12 }).map((_, index) => (<th key={index}>Table heading</th>))}</tr></thead><tbody><tr><td>1</td>{Array.from({ length: 12 }).map((_, index) => (<td key={index}>Table cell {index}</td>))}</tr><tr><td>2</td>{Array.from({ length: 12 }).map((_, index) => (<td key={index}>Table cell {index}</td>))}</tr><tr><td>3</td>{Array.from({ length: 12 }).map((_, index) => (<td key={index}>Table cell {index}</td>))}</tr></tbody></Table>);}export default ResponsiveExample;
ブレークポイント固有
必要に応じてresponsive="sm"、responsive="md"、responsive="lg"、またはresponsive="xl"を使用して、特定のブレークポイントまでのレスポンシブテーブルを作成します。そのブレークポイント以降は、テーブルは通常どおり動作し、水平スクロールされません。
結果
読み込み中...
ライブエディター
import Table from 'react-bootstrap/Table';function ResponsiveBreakpointsExample() {return (<div><Table responsive="sm"><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><td>1</td><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><td>2</td><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><td>3</td><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><Table responsive="md"><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><td>1</td><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><td>2</td><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><td>3</td><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><Table responsive="lg"><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><td>1</td><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><td>2</td><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><td>3</td><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><Table responsive="xl"><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><td>1</td><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><td>2</td><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><td>3</td><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>);}export default ResponsiveBreakpointsExample;