tables.mdx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  1. ---
  2. title: Tables
  3. description: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
  4. bootstrapLink: content/tables/
  5. ---
  6. ## Basic Table
  7. The basic table design has light padding and the presented data is separated wih horizontal dividers. It helps provide users with all the necessary information, without overwheling them with visuals.
  8. The `.table` class adds basic styling to a table:
  9. ```html code example
  10. <div class="table-responsive">
  11. <table class="table table-vcenter">
  12. <thead>
  13. <tr>
  14. <th>Name</th>
  15. <th>Title</th>
  16. <th>Email</th>
  17. <th>Role</th>
  18. <th class="w-1"></th>
  19. </tr>
  20. </thead>
  21. <tbody>
  22. <tr>
  23. <td>Paweł Kuna</td>
  24. <td class="text-muted">
  25. UI Designer, Training
  26. </td>
  27. <td class="text-muted"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
  28. <td class="text-muted">
  29. User
  30. </td>
  31. <td>
  32. <a href="#">Edit</a>
  33. </td>
  34. </tr>
  35. <tr>
  36. <td>Jeffie Lewzey</td>
  37. <td class="text-muted">
  38. Chemical Engineer, Support
  39. </td>
  40. <td class="text-muted"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
  41. <td class="text-muted">
  42. Admin
  43. </td>
  44. <td>
  45. <a href="#">Edit</a>
  46. </td>
  47. </tr>
  48. <tr>
  49. <td>Mallory Hulme</td>
  50. <td class="text-muted">
  51. Geologist IV, Support
  52. </td>
  53. <td class="text-muted"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
  54. <td class="text-muted">
  55. User
  56. </td>
  57. <td>
  58. <a href="#">Edit</a>
  59. </td>
  60. </tr>
  61. <tr>
  62. <td>Dunn Slane</td>
  63. <td class="text-muted">
  64. Research Nurse, Sales
  65. </td>
  66. <td class="text-muted"><a href="#" class="text-reset">dslane3@epa.gov</a></td>
  67. <td class="text-muted">
  68. Owner
  69. </td>
  70. <td>
  71. <a href="#">Edit</a>
  72. </td>
  73. </tr>
  74. <tr>
  75. <td>Emmy Levet</td>
  76. <td class="text-muted">
  77. VP Product Management, Accounting
  78. </td>
  79. <td class="text-muted"><a href="#" class="text-reset">elevet4@senate.gov</a></td>
  80. <td class="text-muted">
  81. Admin
  82. </td>
  83. <td>
  84. <a href="#">Edit</a>
  85. </td>
  86. </tr>
  87. </tbody>
  88. </table>
  89. </div>
  90. ```
  91. ## Responsive tables
  92. Use the `.table-responsive` class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use `.table-responsive{-sm|-md|-lg|-xl}`. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.
  93. ```html code example
  94. <table class="table table-responsive">
  95. <thead>
  96. <tr>
  97. <th>#</th>
  98. <th class="text-nowrap">Heading 1</th>
  99. <th class="text-nowrap">Heading 2</th>
  100. <th class="text-nowrap">Heading 3</th>
  101. <th class="text-nowrap">Heading 4</th>
  102. <th class="text-nowrap">Heading 5</th>
  103. <th class="text-nowrap">Heading 6</th>
  104. <th class="text-nowrap">Heading 7</th>
  105. <th class="text-nowrap">Heading 8</th>
  106. <th class="text-nowrap">Heading 9</th>
  107. <th class="text-nowrap">Heading 10</th>
  108. </tr>
  109. </thead>
  110. <tbody>
  111. <tr>
  112. <th>1</th>
  113. <td>Cell</td>
  114. <td>Cell</td>
  115. <td>Cell</td>
  116. <td>Cell</td>
  117. <td>Cell</td>
  118. <td>Cell</td>
  119. <td>Cell</td>
  120. <td>Cell</td>
  121. <td>Cell</td>
  122. <td>Cell</td>
  123. </tr>
  124. <tr>
  125. <th>2</th>
  126. <td>Cell</td>
  127. <td>Cell</td>
  128. <td>Cell</td>
  129. <td>Cell</td>
  130. <td>Cell</td>
  131. <td>Cell</td>
  132. <td>Cell</td>
  133. <td>Cell</td>
  134. <td>Cell</td>
  135. <td>Cell</td>
  136. </tr>
  137. </tbody>
  138. </table>
  139. ```
  140. ## No wrap
  141. If you don't want the table cell content to wrap to another line, use the `table-nowrap` class.
  142. ```html example
  143. <div class="table-responsive">
  144. <table class="table table-vcenter table-nowrap">
  145. <thead>
  146. <tr>
  147. <th>Name</th>
  148. <th>Title</th>
  149. <th>Email</th>
  150. <th>Role</th>
  151. <th></th>
  152. <th class="w-1"></th>
  153. </tr>
  154. </thead>
  155. <tbody>
  156. <tr>
  157. <td>Paweł Kuna</td>
  158. <td class="text-muted">UI Designer, Training</td>
  159. <td class="text-muted">
  160. <a href="#" class="text-reset">paweluna@howstuffworks.com</a>
  161. </td>
  162. <td class="text-muted">User</td>
  163. <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
  164. expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
  165. quaerat quo repellendus, voluptates.</td>
  166. <td>
  167. <a href="#">Edit</a>
  168. </td>
  169. </tr>
  170. </tbody>
  171. </table>
  172. </div>
  173. ```
  174. ```html
  175. <div class="table-responsive">
  176. <table
  177. class="table table-vcenter table-nowrap">
  178. <thead>
  179. <tr>
  180. <th>Name</th>
  181. <th>Title</th>
  182. <th>Email</th>
  183. <th>Role</th>
  184. <th></th>
  185. <th class="w-1"></th>
  186. </tr>
  187. </thead>
  188. <tbody>
  189. <tr>
  190. <td>Paweł Kuna</td>
  191. <td class="text-muted">
  192. UI Designer, Training
  193. </td>
  194. <td class="text-muted"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
  195. <td class="text-muted">
  196. User
  197. </td>
  198. <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
  199. expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
  200. quaerat quo repellendus, voluptates.
  201. </td>
  202. <td>
  203. <a href="#">Edit</a>
  204. </td>
  205. </tr>
  206. <tr>
  207. <td>Jeffie Lewzey</td>
  208. <td class="text-muted">
  209. Chemical Engineer, Support
  210. </td>
  211. <td class="text-muted"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
  212. <td class="text-muted">
  213. Admin
  214. </td>
  215. <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
  216. expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
  217. quaerat quo repellendus, voluptates.
  218. </td>
  219. <td>
  220. <a href="#">Edit</a>
  221. </td>
  222. </tr>
  223. <tr>
  224. <td>Mallory Hulme</td>
  225. <td class="text-muted">
  226. Geologist IV, Support
  227. </td>
  228. <td class="text-muted"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
  229. <td class="text-muted">
  230. User
  231. </td>
  232. <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
  233. expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
  234. quaerat quo repellendus, voluptates.
  235. </td>
  236. <td>
  237. <a href="#">Edit</a>
  238. </td>
  239. </tr>
  240. <tr>
  241. <td>Dunn Slane</td>
  242. <td class="text-muted">
  243. Research Nurse, Sales
  244. </td>
  245. <td class="text-muted"><a href="#" class="text-reset">dslane3@epa.gov</a></td>
  246. <td class="text-muted">
  247. Owner
  248. </td>
  249. <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
  250. expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
  251. quaerat quo repellendus, voluptates.
  252. </td>
  253. <td>
  254. <a href="#">Edit</a>
  255. </td>
  256. </tr>
  257. <tr>
  258. <td>Emmy Levet</td>
  259. <td class="text-muted">
  260. VP Product Management, Accounting
  261. </td>
  262. <td class="text-muted"><a href="#" class="text-reset">elevet4@senate.gov</a></td>
  263. <td class="text-muted">
  264. Admin
  265. </td>
  266. <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
  267. expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
  268. quaerat quo repellendus, voluptates.
  269. </td>
  270. <td>
  271. <a href="#">Edit</a>
  272. </td>
  273. </tr>
  274. </tbody>
  275. </table>
  276. </div>
  277. ```
  278. ## Table Variants
  279. ```html code example
  280. <table class="table">
  281. <thead>
  282. <tr>
  283. <th scope="col">Class</th>
  284. <th scope="col">Heading</th>
  285. <th scope="col">Heading</th>
  286. </tr>
  287. </thead>
  288. <tbody>
  289. <tr>
  290. <th scope="row">Default</th>
  291. <td>Cell</td>
  292. <td>Cell</td>
  293. </tr>
  294. <tr class="table-primary">
  295. <th scope="row">Primary</th>
  296. <td>Cell</td>
  297. <td>Cell</td>
  298. </tr>
  299. <tr class="table-secondary">
  300. <th scope="row">Secondary</th>
  301. <td>Cell</td>
  302. <td>Cell</td>
  303. </tr>
  304. <tr class="table-success">
  305. <th scope="row">Success</th>
  306. <td>Cell</td>
  307. <td>Cell</td>
  308. </tr>
  309. <tr class="table-danger">
  310. <th scope="row">Danger</th>
  311. <td>Cell</td>
  312. <td>Cell</td>
  313. </tr>
  314. <tr class="table-warning">
  315. <th scope="row">Warning</th>
  316. <td>Cell</td>
  317. <td>Cell</td>
  318. </tr>
  319. <tr class="table-info">
  320. <th scope="row">Info</th>
  321. <td>Cell</td>
  322. <td>Cell</td>
  323. </tr>
  324. <tr class="table-light">
  325. <th scope="row">Light</th>
  326. <td>Cell</td>
  327. <td>Cell</td>
  328. </tr>
  329. <tr class="table-dark">
  330. <th scope="row">Dark</th>
  331. <td>Cell</td>
  332. <td>Cell</td>
  333. </tr>
  334. </tbody>
  335. </table>
  336. ```
  337. ## Table with sticky header
  338. ```html example code scrollable
  339. <table class="table">
  340. <thead class="sticky-top">
  341. <tr>
  342. <th scope="col">Class</th>
  343. <th scope="col">Heading</th>
  344. <th scope="col">Heading</th>
  345. </tr>
  346. </thead>
  347. <tbody>
  348. <tr>
  349. <th scope="row">Default</th>
  350. <td>Cell</td>
  351. <td>Cell</td>
  352. </tr>
  353. <tr>
  354. <th scope="row">Primary</th>
  355. <td>Cell</td>
  356. <td>Cell</td>
  357. </tr>
  358. <tr>
  359. <th scope="row">Secondary</th>
  360. <td>Cell</td>
  361. <td>Cell</td>
  362. </tr>
  363. <tr>
  364. <th scope="row">Success</th>
  365. <td>Cell</td>
  366. <td>Cell</td>
  367. </tr>
  368. <tr>
  369. <th scope="row">Danger</th>
  370. <td>Cell</td>
  371. <td>Cell</td>
  372. </tr>
  373. <tr>
  374. <th scope="row">Warning</th>
  375. <td>Cell</td>
  376. <td>Cell</td>
  377. </tr>
  378. <tr>
  379. <th scope="row">Info</th>
  380. <td>Cell</td>
  381. <td>Cell</td>
  382. </tr>
  383. <tr>
  384. <th scope="row">Light</th>
  385. <td>Cell</td>
  386. <td>Cell</td>
  387. </tr>
  388. <tr class="table-dark">
  389. <th scope="row">Dark</th>
  390. <td>Cell</td>
  391. <td>Cell</td>
  392. </tr>
  393. </tbody>
  394. </table>
  395. ```