table.css

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

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