0

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;
}

enter image description here

1 Answer 1

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.