Cluster d'images

Bonsoir
Dans mon opération de rénovation d'un site ancien, avec pour objectif de le rendre utilisable sur différentes largeurs d'écran, je tombe sur le cas suivant:
http://paralletes.free.fr/tests/photo/cluster1.jpg

Comme je ne tiens pas à utiliser les flex-box, j'ai mis cela sous la forme d'une table, générée par javascript:

<div class="cluster">
  <table>
    <tr>
      <td>
        <figure class="width-100 framed">
          <img src="..." />
          <figcaption>Aile sud</figcaption>
        </figure>
        </td>
        <td>
          <figure class="width-100 framed">
            <img src="..." />
            <figcaption>Aile nord</figcaption>
          </figure>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <figure class="width-100 framed">
            <img src="..." />
         </figure>
        </td>
    </tr>
  </table>
</div>

Je ne parviens pas à définir correctement la feuille de style.

.cluster table {
	margin:auto;
	max-width:100%;
}
.cluster td {width:50%;}
.framed {
	border:1px solid #990000;
	border-radius:0.25em;
	padding:0.25em;
}
.width-100 {
	width:100%;
}

Au dessous d'une certaine largeur d'écran, la largeur de la table ne se produit pas comme je le voudrais.
Merci de votre aide pour la définition d'un CSS "responsive".
Modifié par PapyJP (05 Mar 2016 - 19:08)

Il est possible d'utiliser : table-layout:fixed; , mais cela implique de donner une largeur statique a la table. en gros width:100% au lieu de max-width

gcyrillus a écrit :
Il est possible d'utiliser : table-layout:fixed; , mais cela implique de donner une largeur statique a la table. en gros width:100% au lieu de max-width

Merci de ta réponse.
Je ne connaissais pas cette propriété.
Si je comprends bien ça inverse le fonctionnement habituel des tables qu'on utilise plutôt pour adapter la largeur au contenu.
Dans ce cas, ca devrait correspondre aux besoins, je vais essayer demain