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 use pure CSS to control other elements under same parent?

    Explaining how to use classes with SASS to a Python thinker

    How do I swap triangle icons when doing expanding/collapsing divs with Javascript/CSS

    How do I detect the user’s browser and apply a specific CSS file?

    CSS animation - How to fill in “starting from border”?

    how to get the cssText of external style?

    3x3 CSS grid: how to make center div the only one with a fixed height/width?

    How to center absolute position element in my case

    How to animate searchbox length from focusing on the textbox class CSS3?

    How to keep an unordered list centered within the screen?

    How to float Dojo DropDownMenu over a table cell

    How can I stay organized when writing CSS? [duplicate]

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

    How to create a custom vaadin component in vaadin 6

    How to display thick line under header of sub menu using css

    Inline blocks somehow don't get displayed in a straight line [duplicate]

    How To Create Full Screen Fixed With Scrolling Background Images

    How to simplify cross-browsing css animation keyframe?

    Issue with CSS background image (Image not Showing)

    How to override css for img tag

    Show div on hover span styling

    How to add only those script and css files necessary to views with partial views [closed]

    How to use css to crop parts of an image

    How to select an UNTAG element in CSS

    How to hide and show div border line in my case?

    How can I overlap 2 images on image product in Magento?

    How can I change the color of my body when using Bootstrap?

    How to position button in the middle

    How to use a divider in a navigation with list elements?

    How to make a HTML spinner with CSS