HTML显示表格以适应屏幕大小

我有一个图像库的链接表，如果窗口大小减小，我希望能够适应屏幕大小。目前它只是保持不变的大小

<table class="images" id="albums">
  <tr>
    <td>
      <a href="academy-blitz-may-2014.html" ><img id="academy-blitz-may-2014" src="img/album-covers/academy-blitz-may-2014.jpg" title="Academy Blitz May 2014"/></a>
    </td>

    <td>
      <a href="academy-blitz-october-2014.html" ><img id="academy-blitz-october-2014" src="img/album-covers/academy-blitz-october-2014.jpg" title="Academy Blitz October 2014"/></a>
    </td>

    <td>
      <a href="academy-blitz-november-2012.html" ><img id="academy-blitz-november-2012" src="img/album-covers/academy-blitz-november-2012.jpg" title="Academy Blitz November 2012"/></a>
    </td>

    <td>
      <a href="summer-camp-2014.html" ><img id="summer-camp-2014" src="img/album-covers/summer-camp-2014.jpg" title="Summer Camp 2014"/></a>
    </td>

    <td>
      <a href="academy-on-tour-tullamore-2015.html" ><img id="academy-on-tour-tullamore-2015" src="img/album-covers/academy-on-tour-tullamore-2015.jpg" title="Academy On Tour - Tullamore 2015"/></a>
    </td>


  </tr>

  <tr>
    <td>
      Academy Blitz May 2014
    </td>

    <td>
      Academy Blitz October 2014
    </td>

    <td>
      Academy Blitz November 2012
    </td>

    <td>
      Summer Camp 2014
    </td>

    <td>
      Academy On Tour - Tullamore 2015
    </td>
  </tr>

  <tr>
    <td>
      <a href="u18s-v-mullingar-2013.html" ><img id="u18s-v-mullingar-2013" src="img/album-covers/u18s-v-mullingar-2013.jpg" title="U18's V Mullingar 2013"/></a>
    </td>

    <td>
      <a href="u18s-league-win-2014.html" ><img id="u18s-league-win-2014" src="img/album-covers/u18s-league-win-2014.jpg" title="U18's League Win 2014"/></a>
    </td>

    <td>
      <a href="u12s-v-tullamore-2014.html" ><img id="u12s-v-tullamore-2014" src="img/album-covers/u12s-v-tullamore-2014.jpg" title="U12's V Tullamore 2014"/></a>
    </td>

    <td>
      <a href="u11-lions-semi-final-2015.html" ><img id="u11-lions-semi-final-2015" src="img/album-covers/u11-lions-semi-final-2015.jpg" title="U11 Lions Semi-Final 2015"/></a>
    </td>

    <td>
      <a href="easter-camp-2015.html" ><img id="easter-camp-2015" src="img/album-covers/easter-camp-2015.jpg" title="Easter Camp 2015"/></a>
    </td>
  </tr>

  <tr>
    <td>
      U18's v Mullingar 2013
    </td>

    <td>
      U18's League Win 2014
    </td>

    <td>
      U12's v Tullamore 2014
    </td>

    <td>
      U11 Lions Semi-Final 2015
    </td>

    <td>
      Easter Camp 2015
    </td>
  </tr>      
</table>

每当我尝试缩小尺寸时，所有其他功能都适合屏幕大小，但图库的大小保持不变，尽管对其他功能使用相同的代码（宽度：%）

这是它全屏显示的样子：

这就是我缩小窗口时的样子：

---

您需要使图像具有响应性

#albums img {
    width:100%;
    max-width:100%;
}

然而，填充、文本和它是一个表的事实将阻止它一路缩小

在语义上，以这种方式使用表是非常糟糕的。看起来您仅将其用于布局目的。只需几个div就可以达到相同的效果，并且具有更大的灵活性和语义正确性

---

这里有一个更好的方法。您可能希望将其转换为两列或单列布局，媒体查询大约为600px。

在HTML代码中，它是

#imagegallery

？在css中，img有一个设置的宽度，因此如果您调整大小，它不会改变。这就是问题所在吗？第二，我可能错过了它，但我在你的HTML中的任何地方都看不到id=“imagegallery”，只需在CSS下面添加：#imagegallery img{max width:100%；}@SureshPonnukalai抱歉，我添加了错误的CSS代码。现在编辑。@keikoku92抱歉，我添加了错误的CSS代码。现在编辑。谢谢回复。我试着把它改成divs，但我想不出一个办法让专辑标题正好放在专辑图片下面。你能推荐一种方法吗？

#albums img {
    width:100%;
    max-width:100%;
}