Deanjoe Deanjoe - 13 days ago 5
CSS Question

CSS Horizontal space div table

I'm working on a div table in CSS. What I'm trying to do is to set the same space between margins and table cells and between table cells.

This is what I want to achieve:

Maked whit paint

But this is what it currently looks like:

Table result

I'm using this code for the class:

.tfoto{width:600px;
display:table;
margin-left:200px;
border-top-style:dotted;
border-bottom-style:dotted;
border-left-style:dotted;
border-right-style:dotted;
text-align:center;

background-color:transparent;
border-spacing:1px;
collapse:separate;}

.tcaption {display:table-caption;
font:"Traditional Arabic";}

.trow {display:table-row;
width:200px;
cell-spacing:5px;
padding:5px;}

.tdcell {display:table-cell;
width:200px;
padding:5px;}

Answer

Set Class

.imgs{
    width:100%;
    height:200px;
}

Checkout This :

.tfoto{width:600px;
        display:table;
        margin-left:200px;
        border-top-style:dotted;
        border-bottom-style:dotted;
        border-left-style:dotted;
        border-right-style:dotted;
        text-align:center;

        background-color:transparent;
        border-spacing:1px;
        collapse:separate;}

.tcaption {display:table-caption;
           font:"Traditional Arabic";}

.trow {display:table-row;
       width:200px;
       cell-spacing:5px;
       padding:5px;}

.tdcell {display:table-cell;
         width:200px;
         padding:5px;}
 .imgs {width:100%;
	     height:200px;}
<div class="tfoto">
		<div class="tcaption">
			<p><em>Sample text.</em></p>	
		</div>
		<div class="trow">
		<div class="tdcell">
		<img class="imgs" src="foto1.jpg">
		</div>
		<div class="tdcell">
		<img class="imgs" src="foto2.jpg">
		</div>
		</div>
		<div class="trow">
		<div class="tdcell">
		<img class="imgs" src="foto3.jpg">
		</div>
		<div class="tdcell">
		<img class="imgs" src="foto4.jpg">
		</div>
		</div>

</div>

Comments