Como forçar espaço entre uma tabela css (página da web responsiva)
Eu tenho uma tabela CSS e gostaria de ter espaço entre as células, mas não à esquerda da primeira imagem e à direita da última imagem.
Aqui está uma captura de tela do que eu tenho:
Aqui está uma captura de tela do que eu gostaria:
O HTML atual é:
<div id="footer">
<div class="lower"><img src="images/one.jpg" alt="Ring being put on finger"/></div>
<div class="lower"><img src="images/two.jpg" alt="The mens trousers"/></div>
<div class="lower"><img src="images/three.jpg" alt="Flowers"/></div>
<div class="lower"><img src="images/four.jpg" alt="The rings"/></div>
</div>
e o CSS é
#footer {
display: table;
width: 100%;
max-width: 1024px;
margin-top: 1%;
}
.lower {
display: table-cell;
}
#footer img {
width: 100%;
height: auto;
max-width: 256px;
}
Lembre-se de que esta é uma página da Web responsiva, portanto, gostaria que o espaço permanecesse sempre, mas gostaria que o espaço mudasse de acordo com o tamanho do dispositivo, usando%.