Responsive table with Bootstrap

StackOverflow https://stackoverflow.com/questions/23513457

  •  16-07-2023
  •  | 
  •  

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?

Was it helpful?

Solution

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

OTHER TIPS

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.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top