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 { 
    table-layout:fixed;
}

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 akashmittal.com