table.css

Same filename in this branch
  1. 9 core/themes/olivero/css/components/table.css
Same filename in other branches
  1. 8.9.x core/themes/bartik/css/components/table.css
  2. 10 core/misc/dialog/off-canvas/css/table.css
  3. 10 core/themes/olivero/css/components/table.css
  4. 10 core/modules/ckeditor5/css/table.css
  5. 11.x core/misc/dialog/off-canvas/css/table.css
  6. 11.x core/themes/olivero/css/components/table.css
  7. 11.x core/modules/ckeditor5/css/table.css

Styles for Bartik's tables.

File

core/themes/bartik/css/components/table.css

View source
  1. /**
  2. * @file
  3. * Styles for Bartik's tables.
  4. */
  5. table {
  6. width: 100%;
  7. margin: 10px 0;
  8. border-spacing: 0;
  9. border: 0;
  10. border-collapse: collapse;
  11. font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  12. font-size: 0.857em;
  13. }
  14. table table {
  15. font-size: 1em;
  16. }
  17. tr {
  18. padding: 0.1em 0.6em;
  19. border-bottom: 1px solid #ccc;
  20. background: #efefef;
  21. background: rgba(0, 0, 0, 0.063);
  22. }
  23. thead > tr {
  24. border-bottom: 1px solid #000;
  25. }
  26. tr.odd {
  27. background: #e4e4e4;
  28. background: rgba(0, 0, 0, 0.105);
  29. }
  30. table tr th {
  31. border-bottom-style: none;
  32. background: #757575;
  33. background: rgba(0, 0, 0, 0.51);
  34. }
  35. table tr th,
  36. table tr th a,
  37. table tr th a:hover,
  38. table tr th a:focus {
  39. color: #fff;
  40. font-weight: bold;
  41. }
  42. table tbody tr th {
  43. vertical-align: top;
  44. }
  45. tr td,
  46. tr th {
  47. padding: 4px 9px;
  48. text-align: left; /* LTR */
  49. border: 1px solid #fff;
  50. }
  51. .tabledrag-handle:hover,
  52. .tabledrag-handle {
  53. border: none;
  54. }
  55. [dir="rtl"] tr td,
  56. [dir="rtl"] tr th {
  57. text-align: right;
  58. }
  59. /**
  60. * Responsive tables.
  61. */
  62. @media screen and (max-width: 37.5em) { /* 600px */
  63. th.priority-low,
  64. td.priority-low,
  65. th.priority-medium,
  66. td.priority-medium {
  67. display: none;
  68. }
  69. }
  70. @media screen and (max-width: 60em) { /* 920px */
  71. th.priority-low,
  72. td.priority-low {
  73. display: none;
  74. }
  75. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.