How to make the table fit to the mobile screen size in css?


Tags: html,css,responsive-design,media-queries,screen-size

Problem :

I have a table in which there are 3 rows: enter image description here

The above image is in the desktop view.

The HTML belonging to the 1st row containing the "Dependents" text is:

<div class="section header single">
    <div class="inter">
        <!-- ko i18n:'dependents' -->Dependents<!-- /ko -->
        <div class="info header-sections" data-bind="popup: {
                    popupId: 'info-popup',
                    closeOnOutsideClick: true,
                    vm: {title: '', message: depend_info[locale.selected_locale()]}
                }"></div>
    </div>
</div>


The CSS belonging to the 1st row containing the "Dependents" text is:

.default-body .section.header.single {
    background: url(img/section-bg-BenPal.png) repeat-x scroll 0 0 #0359a6 !important;
    border: 1px solid #bfbfbf !important;
    box-shadow: none !important;
    top: 0 !important;
    margin-top: 40px !important;
}
.section.header.single {
    top: 0;
}

.section.header {
    position: relative;
    padding: 10px 0px !important;
    -webkit-border-radius: 0;
    width: 100%;
}

   .section 
   {
    height: auto;
    display: table;
   }



The HTML for the rows beneath the "Dependents" text is:

<div class="section single">
    <div class="inter">
        <table cellspacing="0" cellpadding="0" class="table title">
            <tbody><tr>
                <td class="cell1"><!-- ko i18n:'dependents.name' -->Name<!-- /ko --></td>
                <td class="cell2"><!-- ko i18n:'dependents.type' -->Type<!-- /ko --></td>
                <td class="cell3"><!-- ko i18n:'dependents.status' -->Status<!-- /ko --></td>
                <td class="cell4 last"></td>
            </tr>
            </tbody><tbody data-bind="foreach: dependents"></tbody>
        </table>
        <!-- ko ifnot: pendingApproval || viewReadonlyBenefits-->
        <table cellspacing="0" cellpadding="0" class="table">
            <tbody><tr data-bind="css:{hidden: dependents().length != 0}" class=""><td colspan="3" class="cell-common"><!--ko i18n: 'dependents.no.dependent' -->There is no dependent registered in your file<!--/ko--></td></tr>
            <tr>
                <!-- ko if: showAddButton() --><!-- /ko -->
           </tr>
        </tbody></table>
        <!-- /ko -->
    </div>
</div>

The CSS for the rows beneath the "Dependents" text is:

.section.single {
    margin-top: 0px;
}
.section 
{
    width: 100%;
    height: auto;
    padding: 10px 0px;
    display: table;
}
.section {
    border-top: 0;
    border-left: 1px solid #aecaea;
    border-right: 1px solid #aecaea;
    border-bottom: 1px solid #aecaea;
    -webkit-box-shadow: 0 2px 3px #CCCCCC !important;
    background-color: #fff;
}

My task is to make the table fit to the screen size with the the borders visible both on the left and the right side.

I have tried changing the width to 100% or auto in all the classes but unfortunately the table is still going out of the screen when I am resizing it to mobile size.



Solution :

What about 100vw?

table{
width:100vw;
}

I would also recommend you to use the table component from Semantic-Ui, which is optimized for mobile screens.


    CSS Howto..

    How to change the text color of the clicked row of table with css and jquery

    How to create tabs using Javascript and Jquery

    How to space text like using tab on website?

    Create template page for showing jpg's from direct links [closed]

    how to ensure that each time a css class name changes from the previous, it is applied a specific style

    How to enforce image max-width when using bootstrap 3?

    How to set a max-width only to text nodes not in a tag?

    How to make input box show up from right to left?

    How to avoid name collisions of css class names

    CSS: how to make a list item containing a form “submittable”?

    How to make an inline-block box stick to the top? [duplicate]

    How can I show part of an element, and toggle to all of the element on click?

    How do I style a circular vertically-loading progress bar?

    How do you add multile vendor prefixes to one css property?

    How to separate settings and css in a less?

    How to change the label color by its id with css?

    Sitefinity 5.3: How do I order my CSS?

    How to remove hover state

    How to get Google menu buttons like styling using CSS

    How to use Javascript to get a visitors monitor resolution?

    How to change column display order mobile/tablet view CSS Wordpress?

    How to vertically align the baseline of text to a set point in HTML/CSS

    How to fade out text on top of semi-transparent div using CSS?

    How to place a div below another div?

    how to enlarge an element and show text on clicking

    How to target multiple table rows with a single CSS rule?

    My YouTube video wont show in iframe

    How to make all images look same

    How do I create a styleClass to use this CSS?

    CSS: How to move hint box (a:hover) to the left?