Table doesn't fit parent container size on mobile

Question

I'm having hard times to fit a table with 3 columns to the screen size, whatever it is.

On this example : the table is displayed correctly on any PC screen.

However, on mobile, if you're below 480px (width), it will be displayed like this:

You can use the mobile view in Chrome Developer Tools to see the same thing ( I use "Samsung Galaxy S / S II " preset )

What can I do to make the table fit the screen ? I tried adding "width: 100%" in "style" or in the table tag (width="100%") but nothing happens.

I also tried the meta viewport tip, but still no result.

Answer 1

Always avoid using tables in responsive layouts, try dl, dt, dd instead. Try the below sample

HTML

<section class="table_specification">
    <dl>
        <dt>Heading 1</dt>
        <dd>Description 1</dd>
   </dl>
    <dl>
        <dt>Heading 2</dt>
        <dd>Description 2</dd>
   </dl>
        <dl>
        <dt>Heading 3</dt>
        <dd>Description 3</dd>
   </dl>
</section>

CSS

dl, dd, dt{
    margin:0;
}
.table_specification{
    display: table;
    width:100%;
    border-spacing:5px 5px;
}
.table_specification dl{    
      display:table-row;  
}
.table_specification dt, .table_specification dd{
    display: table-cell;
    width:50%;
    border:1px solid red;
}
@media only screen and (max-width:480px){
   .table_specification dd, .table_specification dt{
    display: block;
    width:100%;
    border:1px solid red;
} 
}

check the fiddle demo and resize the window to see the output