Question

如何让这些表针对移动设备/平板电脑设备做出响应？我使用bootstrap但它不起作用。

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

这是一个带iPhone按钮的网站。无论如何，图像可以响应？

Answer 1

添加 <div class="table-responsive"> 类以使表格响应。

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

在此处查看：http://getbootstrap.com/css/#tables-responsive

添加 <img class="img-responsive" src="images/img.jpg" alt=""/> 课程以使图片响应。 在这里查看：http://getbootstrap.com/css/#overview-responsive-images

Answer 2

关于响应表：

Bootstrap有专门的课程来做到这一点。查看here.

关于响应（或相当流畅）的图像：

首先，你最好不要在css中设置大小而不是在使用属性的html中设置大小。（除非每张图片都有不同的尺寸）

其次，你需要做两件事来让你的照片响应：

删除固定大小
将class="img-responsive"添加到每个<img>元素。

响应表与Bootstrap

2 个答案:

关于响应表：

关于响应（或相当流畅）的图像：