search

DataTables / Responsive

Responsive extension for DataTables, providing support for complex tables on all device screen sizes
Other
148 stars 87 forks source link

Feature Request: Add CSS Support for "Compact" DataTables #14

Closed ComputerTinker closed 9 years ago

ComputerTinker commented 9 years ago

I'm using DataTables which make use of the "compact" CSS class which changes the padding / spacing of each row. Currently, the Responsive extension's plus icon will protrude out of the bottom of each row when the DataTable is compact. Below is the CSS override that I used to make Responsive get along nicely, though this is admittedly just a hack:

table.dataTable.dtr-inline.collapsed tbody td:first-child:before,
table.dataTable.dtr-inline.collapsed tbody th:first-child:before {
  top: 2px;    /* Changed */
  left: 4px;
  height: 14px;  /* Changed */
  width: 14px;  /* Changed */
  display: block;
  position: absolute;
  color: white;
  border: 2px solid white;
  border-radius: 14px;  /* Changed */
  text-align: center;
  line-height: 12px;  /* Changed */
  box-shadow: 0 0 3px #444;
  box-sizing: content-box;
  content: '+';
  background-color: #31b131;
}
DataTables commented 9 years ago

Thanks for this. I think in Responsive 1.1 I'm going to need to drop the use of :before and inject proper elements into the table for the control element. That will help with this as well.