Responsive table with Bootstrap

Question

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?

Answer 1

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

Answer 2

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.