In my quest for a more responsive website I've found that placing my Lightbox image gallery in a table works well - I'm wondering though, based on how I'm using the code it will come back to bite my in the proverbial later down the line.

 

Here's a page with 2 galleries

.table {
    display: table;
    width: 100%;
}
table.lightbox-table td {
	text-align: center;
	margin: 0 auto;
	padding: 0;
}
.table-row {
    display: table-row;
    width: 100%;
}
.table-cell {
    display: table-cell;
		width: fit-content;
    border: solid 6px #575974;
    margin: 0;
    padding: 0;
}
.table-cell:hover {
    border: solid 6px #6f73a9;
}
@media screen and (min-width: 1200px) {
    .table, .table-row {
        display: block;
		margin: 15px 0;
    }
    .table-cell {
        display:inline-block;
		width: fit-content;
    }
}
@media screen and (max-width: 1200px) {
    .table, .table-row {
        display: block;
		margin: 15px 0;
    }
    .table-cell {
        display:inline-block;
		width: fit-content;
    }
}
@media screen and (max-width: 640px) {
    .table, .table-row {
        display: block;
    }
    .table-cell {
        display:inline-block;
		width: 32%;
    }
}
@media screen and (max-width: 400px) {
    .table, .table-row {
        display: block;
    }
    .table-cell {
        display:inline-block;
		width: 48%;
    }
}
 

  <div id='gallery-1' class='row gallery galleryid-362 gallery-size-thumbnail'>
<table class="lightbox-table" cellpadding="5px" border="0" width="100%" cellspacing="0"><tr><td>
<div class="table">
  <div class="table-row">

    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-1.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-1.jpg" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-2.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-2.jpg" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-3.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-3.jpg" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-4.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-4.jpg" /></a></div>

    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-5.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-5.jpg" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-6.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-6.jpg" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-7.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-7.jpg" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-8.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-8.jpg" /></a></div>

    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-9.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-9.jpg" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-10.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-10.jpg" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-11.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-11.jpg" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-12.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-12.jpg" /></a></div>

    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-13.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-13.jpg" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-14.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-14.jpg" /></a></div>

  </div> <!-- table-row -->
</div> <!-- table -->
</tr></table>
  </div> <!-- gallery-1 -->


  <div id='gallery-1' class='row gallery galleryid-362 gallery-size-thumbnail'>
<table class="lightbox-table" cellpadding="5px" border="0" width="100%" cellspacing="0"><tr><td>
<div class="table">
  <div class="table-row">

    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/1.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/110.png" width="228" height="148" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/2.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/210.png" width="228" height="148" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/3.jpg"><img class="alignnone wp-image-482 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/36.png" width="228" height="148" /></div>

    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/4.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/41.png" width="228" height="148" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/5.jpg"><img class="alignnone wp-image-481 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/51.png" width="228" height="148" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/6.jpg"><img class="alignnone wp-image-482 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/61.png" width="228" height="148" /></a></div>

  </div> <!-- table-row -->
</div> <!-- table -->
</tr></table>
  </div> <!-- gallery-1 -->
 

Are tables OK to use in the way I am or is there a better alternative?

 

Cheers,

 

Niall

 

Get rid of the table elements and table row elements. Use divs instead. By changing the divs display property to table/table-row/table-cell you can get the same visual behavior as you would with "real" table elements.

Thanks Nillervision, is this more suitable?

  <div class="gallery-wrapper">
<div class="table">
  <div class="table-row">

    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/1.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/110.png" width="228" height="148" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/2.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/210.png" width="228" height="148" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/3.jpg"><img class="alignnone wp-image-482 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/36.png" width="228" height="148" /></div>

    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/4.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/41.png" width="228" height="148" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/5.jpg"><img class="alignnone wp-image-481 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/51.png" width="228" height="148" /></a></div>
    <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/6.jpg"><img class="alignnone wp-image-482 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/61.png" width="228" height="148" /></a></div>

  </div> <!-- table-row -->
</div> <!-- table -->
  </div> <!-- gallery-wrapper -->

Yes, You get the idea