表
选项
- table标签中的.noborder类从单元格中删除边框
- table标签中的.nostripe类从行中删除条纹
- .scrollTable类在包装div使其移动友好
- .subheading(使用colspan)将背景颜色放在一行上
基本表
基本表格将根据内容自动调整大小，并在交替的行上自动添加灰色/白色背景。
| 内容放在这里 | 这是较长的内容Donec id elit not mi porta gravida at eget metus。 | 内容放在这里 | 内容放在这里 |
| 内容放在这里 | 这是加长版的内容在这里，我不是我的胎心。 | 内容放在这里 | 内容放在这里 |
| 内容放在这里 | 这是加长版的内容在这里，我不是我的胎心。 | 内容放在这里 | 内容放在这里 |
Content Goes Here This is longer Content Donec id elit non mi porta birth at eget metus。 内容在这里 内容在这里 内容在这里 这是更长的内容在这里Donec id非分娩门在分娩时。 内容在这里 内容在这里 内容在这里 这是更长的内容在这里Donec id非分娩门在分娩时。 Content Goes Here Content Goes Here
带表头的表
通过在表的顶部添加“thead”部分，您可以创建列标题。每个列标题的标题将自动加粗。此外，您还可以通过添加'large-6'之类的列宽度类来指定列的大小，以强制该列具有特定的宽度。
| 第1列 | 第2列 | 第三列 | 列4 |
|---|---|---|---|
| 内容放在这里 | 这是稍长的内容。 | 内容放在这里 | 内容放在这里 |
| 内容放在这里 | 这是很长的内容，可能会自动换行。 | 内容放在这里 | 内容放在这里 |
| 内容放在这里 | 这是更长的内容，可能会自动换行。我发现我没有胎心。 | 内容放在这里 | 内容放在这里 |
第一栏 第二栏 第三栏 第四栏 Content Goes Here 这是稍长的内容。 Content Goes Here Content Goes Here Content Goes Here 这是很长的内容，可能会被换行。 Content Goes Here Content Goes Here Content Goes Here 这是更长的内容，可能会被包装。我发现我没有胎心。 Content Goes Here Content Goes Here
表的标题，页眉，页脚和副标题
表格的页脚必须放在页眉的下面。标题可以放置在任何地方，但只会显示在表的顶部。多个标题会叠加，应该避免。可以根据需要使用几个小标题来分隔表格数据。
| 月 | 储蓄 | 费用 | 增长 |
|---|---|---|---|
| 页脚 | 4000美元 | 2500美元 | 5% |
| 我是说，我是说，我是说，我是说，我是说，我是说，我是说。 | 400美元 | 100美元 | 5% |
| 2月 | 300美元 | 250美元 | 4% |
| 3月 | 500美元 | 210美元 | 12％ |
| 年中副标题 | |||
| 7月 | 400美元 | 100美元 | 5% |
| 8月 | 300美元 | 250美元 | 4% |
<标题>每月储蓄-表标题 <头> 月 储蓄 支出 增长 Footer $4000 $2500 5% < / td > < td > 400 < / td > < td > 100 < / td > < td > 5% < / td > < / tr > < tr > < td > 2月< / td > < td > 300 < / td > < td > 250 < / td > < td > 4% < / td > < / tr > < tr > < td > 3 < / td > < td > 500 < / td > < td > 210 < / td > < td > 12% < / td > < / tr > < tr类=“副标题”> < td colspan = 4 >年中副标题< / td > < / tr > < tr > < td > 7月< / td > < td > 400 < / td > < td > 100 < / td > < td > 5% < / td > < / tr > < tr > < td > 8月< / td > < td > 300 < / td > < td > 250 < / td > < td > 4% < / td > < / tr > < / tbody > < /表>
移动友好的(可滚动的)表格，有很多内容
用class="scrollTable"将表包装在div中。这将确保表可以在移动设备上滚动。
月储蓄-表标题
月
储蓄
费用
增长
这
那
页脚
4000美元
2500美元
5%
数量
更多的数量
我是说，我是说，我是说，我是说，我是说，我是说，我是说。
400美元
100美元
5%
100美元
5%
2月
300美元
250美元
4%
250美元
4%
3月
500美元
210美元
12％
210美元
12％
年中副标题
7月
400美元
100美元
5%
100美元
5%
8月
300美元
250美元
4%
250美元
4%
<标题>月储蓄-表标题 <头> 月 支出 增长 This That Footer $4000 $2500 5% Number < body> Lorem ipsum dolor sit met, tetuer adipiscing elit。< / td > < td > 400 < / td > < td > 100 < / td > < td > 5% < / td > < td > 100 < / td > < td > 5% < / td > < / tr > < tr > < td > 2月< / td > < td > 300 < / td > < td > 250 < / td > < td > 4% < / td > < td > 250 < / td > < td > 4% < / td > < / tr > < tr > < td > 3 < / td > < td > 500 < / td > < td > 210 < / td > < td > 12% < / td > < td > 210 < / td > < td > 12% < / td > < / tr > < tr类=“副标题”> < td colspan =“6”>年中副标题< / td > < / tr > < tr > < td > 7月< / td > < td > 400 < / td > < td > 100 < / td > < td > 5% < / td > < td > 100 < / td > < td > 5% < / td > < / tr > < tr > < td > 8月< / td > < td > 300 < / td > < td > 250 < / td > < td > < / td > 4%< td > 250 < / td > < td > 4% < / td > < / tr > < / tbody > < /表> < / div >
搜索
最重要的
