Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  June 2020

  We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

  Cheers,

  Colin
• qqashish Posts: 34Questions: 10Answers: 0

  June 2020

  Thanks Colin,
  here it is

  http://live.datatables.net/rohohase/1/edit

  1. child row label and data are too close.
  2. Any way to apply CSS to child rows only.
• tangerine Posts: 3,365Questions: 39Answers: 395

  June 2020

  https://datatables.net/examples/api/row_details.html

  child row label and data are too close.

  The example has the details-control in a separate column.

  Any way to apply CSS to child rows only.

  The format function in the example could have any CSS applied to it.
• kthorngren Posts: 21,546Questions: 26Answers: 4,988

  June 2020

  @tangerine The question is regarding Responsive child rows

  child row label and data are too close.

  Do you mean the plus sign PNG? If so you can inspect the element by right clicking on the plus sign to see what styles are applied. I think this is the one you want to checkout:

  table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td.dtr-control, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th.dtr-control {
      position: relative;
      padding-left: 30px;
      cursor: pointer;
  }
  

  You may be able to change the padding-left within the Inspect tool to see what value to change. Then override the style on your page. I updated your example with padding-left: 60px;, see the CSS tab.
  http://live.datatables.net/rohohase/2/edit

  Any way to apply CSS to child rows only.

  You can use the browser's inspector in the same way to inspect the child rows. Then decide on what you want to apply where. If you still have questions please provide more specifics of what you want.

  Kevin
• qqashish Posts: 34Questions: 10Answers: 0

  June 2020 edited June 2020

  1. Like I already mentioned , Detail Control is not OK as child rows are not searchable.

  2. I didnt mean PNG but thanks

  I mean child rows after clicking png...pl see label and its descriptions are too close not aligned..

  
• kthorngren Posts: 21,546Questions: 26Answers: 4,988

  June 2020

  Like I already mentioned , Detail Control is not OK as child rows are not searchable.

  Thats not necessarily true. You can use Child Detail Rows and search them. The first option and easiest option is to place all the data you want in the child rows in Datatables columns and use columns.visible to hide the columns.

  Or you can do some things like this thread.

  I won't be much help with formatting the Responsive child rows.

  Kevin
• qqashish Posts: 34Questions: 10Answers: 0

  June 2020

  Kindly help me format data as shown in screenshot and I will mark this as answered.

  In default , its all in straight vertically aligned. I dont know why its like this. Colin can you hear me plz ?

  ( working again with detail control is again going to consume time , cant do now )
• colin Posts: 15,240Questions: 1Answers: 2,599

  June 2020 Answer ✓

  You can format the child rows anyway you like, even with a table as in the example here. The best bet would be to search the forum, as there are plenty of examples that you could use as a template,

  Colin