Check out example codes for "force table to fit to page css". It will help you in understanding the concepts better.

Code Example 1

table { 

td { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    word-wrap: break-word;

/*For mobile phones I leave the table width but assign an additional CSS
class to the table to enable horizontal scrolling (table will not go over
the mobile screen anymore):*/

@media only screen and (max-width: 480px) {
    /* horizontal scrollbar for tables if mobile screen */
    .tablemobile {
        overflow-x: auto;
        display: block;

Learn ReactJs, React Native from