html

Issue regarding responsive datatable  #angularjs #reactjs

  • Girth Gear Ashfaque Ayush Jhunjhunwala INDMSF/16-17/00003 Furnace Bearing 22317 EW33J no 2.0 2.0 31/08/16 08/31/16 31/08/16 08/31/16 Ashfaque Ayush Jhunjhunwala
  • Now some of my webpages contain data tables.
  • I do not need this scrollbar and I want to see the all table columns to be fitted in the small screen, may be with small fonts.
  • I need that the whole table will be visible with smaller fonts and without horizontal scrollbar.
  • @Abhradip See update – Chris Happy 3 hours ago

I have an existing ruby on rails webapp and I have used Bootstrap 3 to make it fully responsive and for other styling requirements. Now some of my webpages contain data tables. Since my webapp is fully responsive, so when I open my webapp in mobile devices, the data tables get fit into the small screen and a horizontal scrollbar comes at bottom.
But I don’t need this feature. I need that the whole table will be visible with smaller fonts and without horizontal scrollbar.

@ng_real_ninja: Issue regarding responsive datatable #angularjs #reactjs

I have an existing ruby on rails webapp and I have used Bootstrap 3 to make it fully responsive and for other styling requirements. Now some of my webpages contain data tables. Since my webapp is fully responsive, so when I open my webapp in mobile devices, the data tables get fit into the small screen and a horizontal scrollbar comes at bottom. But I don’t need this feature. I need that the whole table will be visible with smaller fonts and without horizontal scrollbar.

Is there any way to achieve this using media queries and any other tricks?

Please help me to figure out this.

Thanks in advance!!!

My data table is as follows:

My actual view is:

My mobile view is:-

See, in the mobile view, a horizontal scrollbar is appearing. I do not need this scrollbar and I want to see the all table columns to be fitted in the small screen, may be with small fonts.

$(‘#myTable’).DataTable( { responsive: true } );

@media (max-width: 767px) { .table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { padding: 1px; font-size: 6px; } } @media (min-width: 768px) { .table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { padding: 2px; font-size: 8px; } } @media (min-width: 992px) { .table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { padding: 3px; font-size: 12px; } }

html

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.