CODEWITHSUNDEEP
twitter-bootstraphtml-table
Clinton Van Axel
Clinton Van Axel

Reputation: 75

Responsive table with Bootstrap

How can I make these tables responsive for mobile/tablet devices? I use bootstrap but it won't work.

<table id="Tabel_01" width="1910" height="1201" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="8">
        <img src="afbeeldingen/index_01.gif" width="1910" height="147" alt=""></td>
</tr>
<tr>
    <td colspan="2" rowspan="5">
        <img src="afbeeldingen/index_02.gif" width="629" height="449" alt=""></td>
    <td>
        <img src="afbeeldingen/index_03.gif" width="112" height="103" alt=""></td>
    <td rowspan="5">
        <img src="afbeeldingen/index_04.gif" width="91" height="449" alt=""></td>
    <td>
        <a href="alert.htm">
            <img src="afbeeldingen/Naamloos-3_05.gif" width="112" height="103" border="0" alt=""></a></td>
    <td rowspan="5">
        <img src="afbeeldingen/index_06.gif" width="84" height="449" alt=""></td>
    <td>
        <img src="afbeeldingen/index_07.gif" width="112" height="103" alt=""></td>
    <td rowspan="5">
        <img src="afbeeldingen/index_08.gif" width="770" height="449" alt=""></td>
</tr>
<tr>
    <td>
        <img src="afbeeldingen/index_09.gif" width="112" height="69" alt=""></td>
    <td>
        <img src="afbeeldingen/index_10.gif" width="112" height="69" alt=""></td>
    <td>
        <img src="afbeeldingen/index_11.gif" width="112" height="69" alt=""></td>
</tr>
<tr>
    <td>
        <img src="afbeeldingen/index_12.gif" width="112" height="103" alt=""></td>
    <td>
        <img src="afbeeldingen/index_13.gif" width="112" height="103" alt=""></td>
    <td>
        <img src="afbeeldingen/index_14.gif" width="112" height="103" alt=""></td>
</tr>
<tr>
    <td>
        <img src="afbeeldingen/index_15.gif" width="112" height="71" alt=""></td>
    <td>
        <img src="afbeeldingen/index_16.gif" width="112" height="71" alt=""></td>
    <td>
        <img src="afbeeldingen/index_17.gif" width="112" height="71" alt=""></td>
</tr>
<tr>
    <td>
        <img src="afbeeldingen/index_18.gif" width="112" height="103" alt=""></td>
    <td>
        <img src="afbeeldingen/index_19.gif" width="112" height="103" alt=""></td>
    <td>
        <img src="afbeeldingen/index_20.gif" width="112" height="103" alt=""></td>
</tr>
<tr>
    <td colspan="2">
        <img src="afbeeldingen/index_21.gif" width="629" height="1" alt=""></td>
    <td colspan="6">
        <img src="afbeeldingen/index_22.gif" width="1281" height="1" alt=""></td>
</tr>
<tr>
    <td>
        <img src="afbeeldingen/index_23.gif" width="1" height="1" alt=""></td>
    <td colspan="7" rowspan="2">
        <img src="afbeeldingen/index_24.gif" width="1909" height="603" alt=""></td>
</tr>
<tr>
    <td>
        <img src="afbeeldingen/index_25.gif" width="1" height="602" alt=""></td>
</tr>
<tr>
    <td>
        <img src="afbeeldingen/spacer.gif" width="1" height="1" alt=""></td>
    <td>
        <img src="afbeeldingen/spacer.gif" width="628" height="1" alt=""></td>
    <td>
        <img src="afbeeldingen/spacer.gif" width="112" height="1" alt=""></td>
    <td>
        <img src="afbeeldingen/spacer.gif" width="91" height="1" alt=""></td>
    <td>
        <img src="afbeeldingen/spacer.gif" width="112" height="1" alt=""></td>
    <td>
        <img src="afbeeldingen/spacer.gif" width="84" height="1" alt=""></td>
    <td>
        <img src="afbeeldingen/spacer.gif" width="112" height="1" alt=""></td>
    <td>
        <img src="afbeeldingen/spacer.gif" width="770" height="1" alt=""></td>
</tr>

This a website with buttons like the iPhone. Is there anyway the image can be responsive to?

Upvotes: 1

Views: 837

Answers (2)

priyankaJ
priyankaJ

Reputation: 100

Add a <div class="table-responsive"> class to make table responsive.

> <div class="table-responsive">  
>    <table class="table">
>     ...  
>    </table> 
> </div>

check it here: http://getbootstrap.com/css/#tables-responsive

Add a <img class="img-responsive" src="images/img.jpg" alt=""/> class to make images responsive. check it here: http://getbootstrap.com/css/#overview-responsive-images

Upvotes: 1

fonorobert
fonorobert

Reputation: 317

About the table being responsive:

Bootstrap has dedicated classes to do just that. Check here.

About the images being responsive (or rather fluid):

First of all you would be better off setting sizes in css rather than in html using attributes. (except if every image has different size)

Second, you need to do two things to make your pics responsive:

  1. Remove the fixed sizing
  2. Add class="img-responsive" to every <img> element.

Upvotes: 0

Related Questions