表格
示例
使用 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;