Responsive list view using bootstrap 2 in joomla 3

Question

Here I'm facing the problem with responsive display of my component List view in Joomla 3.0.If I see the list view in my mobile,the columns crossing the limit of Joomla page(Image Attached).Is there any to make the list views as responsive using bootstrap 2 ?

default.php

    <table id="box-table-a" >
     <thead>
      <tr>
        <th scope="col"></th>
        <th scope="col"></th>
        <th scope="col"></th>
      </tr>
   </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        <tr>
    </tbody>
</table>    

css:

    #box-table-a{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    float:left; 
}

#box-table-a th{
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    font-weight:bold;   
    background:#b9c9fe; 
    color:#000000; 
    border: 1px solid #ffffff;
}

Answer 1

Bootstrap 2 doesn't have built-in responsive table support, but you can try this workaround below. Try to wrap your table with a div and give overflow-x to the wrapper

HTML code

<div class="table-wrapper">
  <table id="box-table-a" >
     <thead>
      <tr>
        <th scope="col"></th>
        <th scope="col"></th>
        <th scope="col"></th>
      </tr>
   </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        <tr>
    </tbody>
</table>

CSS

.table-wrapper {
   width:100%;
    overflow-x:auto;
}
#box-table-a{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    float:left; 
}

#box-table-a th{
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    font-weight:bold;   
    background:#b9c9fe; 
    color:#000000; 
    border: 1px solid #ffffff;
}

Additionally you may want to try other solutions using jquery, such as this and this