You are here

Home » API reference » Simple Responsive Table 8

simple-responsive-table.css in Simple Responsive Table 8 

/* Start table responsive */
/* Force table to not be like tables anymore */
table,
thead,
tbody,
th,
td,
tr {
  display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

tr {
  border: 1px solid #ccc;
}

td {
  /* Behave  like a "row" */
  border: none !important;
  border-bottom: 1px solid #eee !important;
  position: relative !important;
  padding-left: 50% !important;
  white-space: normal !important;
  text-align: left !important;
}

td:before {
  /* Now like a table header */
  position: absolute;
  left: 1%;
  padding-right: 10px;
  white-space: nowrap;
  text-align: left;
  font-weight: bold;
}

/* Label the data */
td:before {
  content: attr(data-title);
  white-space: normal;
}
/* Empty row data */
td>div.simple-responsive-table-empty-row-data {
  min-height: 1.5em;
}
/* End table responsive */
/* Start action dropdown multiple */
.js table td .dropbutton-multiple {
  padding-right: inherit;
}
/* End action dropdown multiple */

File

css/simple-responsive-table.css
View source 
  1. /* Start table responsive */

  2. /* Force table to not be like tables anymore */

  3. table,

  4. thead,

  5. tbody,

  6. th,

  7. td,

  8. tr {

  9.   display: block;

  10. }

  11. 

  12. /* Hide table headers (but not display: none;, for accessibility) */

  13. thead tr {

  14.   position: absolute;

  15.   top: -9999px;

  16.   left: -9999px;

  17. }

  18. 

  19. tr {

  20.   border: 1px solid #ccc;

  21. }

  22. 

  23. td {

  24.   /* Behave  like a "row" */

  25.   border: none !important;

  26.   border-bottom: 1px solid #eee !important;

  27.   position: relative !important;

  28.   padding-left: 50% !important;

  29.   white-space: normal !important;

  30.   text-align: left !important;

  31. }

  32. 

  33. td:before {

  34.   /* Now like a table header */

  35.   position: absolute;

  36.   left: 1%;

  37.   padding-right: 10px;

  38.   white-space: nowrap;

  39.   text-align: left;

  40.   font-weight: bold;

  41. }

  42. 

  43. /* Label the data */

  44. td:before {

  45.   content: attr(data-title);

  46.   white-space: normal;

  47. }

  48. /* Empty row data */

  49. td>div.simple-responsive-table-empty-row-data {

  50.   min-height: 1.5em;

  51. }

  52. /* End table responsive */

  53. /* Start action dropdown multiple */

  54. .js table td .dropbutton-multiple {

  55.   padding-right: inherit;

  56. }

  57. /* End action dropdown multiple */