Nested datatables with select (checkbox icons)

pgerundt

Hi guys,

in addition to my post
https://datatables.net/forums/discussion/69265/sort-icons-of-nested-tables-are-hidden-by-css
there is a similar problem with the checkbox icons when using the select extension in the inner tables: The header row with class 'select-checkbox' (set by datatables) matches the css rule (from https://cdn.datatables.net/select/1.3.4/css/select.bootstrap4.css):

table.dataTable tbody th.select-checkbox

because table.dataTable tbody is the outer table and th-select-checkbox is the inner table.

I would recommend the following changes marked with **:

table.dataTable tbody **> tr >** td.select-checkbox,
table.dataTable tbody **> tr >** th.select-checkbox {
  position: relative;
}
table.dataTable tbody **> tr >** td.select-checkbox:before,
table.dataTable tbody **> tr >** td.select-checkbox:after,
table.dataTable tbody **> tr >** th.select-checkbox:before,
table.dataTable tbody **> tr >** th.select-checkbox:after {
  display: block;
  position: absolute;
  top: 1.2em;
  left: 50%;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
}
table.dataTable tbody **> tr >** td.select-checkbox:before,
table.dataTable tbody **> tr >** th.select-checkbox:before {
  content: " ";
  margin-top: -2px;
  margin-left: -6px;
  border: 1px solid black;
  border-radius: 3px;
}
table.dataTable tr.selected **>** td.select-checkbox:after,
table.dataTable tr.selected **>** th.select-checkbox:after {
  content: "✓";
  font-size: 20px;
  margin-top: -19px;
  margin-left: -6px;
  text-align: center;
  text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
}
table.dataTable.compact tbody **> tr >** td.select-checkbox:before,
table.dataTable.compact tbody **> tr >** th.select-checkbox:before {
  margin-top: -12px;
}
table.dataTable.compact tr.selected **>** td.select-checkbox:after,
table.dataTable.compact tr.selected **>** th.select-checkbox:after {
  margin-top: -16px;
}

Greetings,
Pascal

allan

Hi Pascal,

Thanks for this. I've added a reply on this topic in your other thread.

Allan