CSS table aligned with images - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table

Description

CSS table aligned with images

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
body {<!--from   w  w w. j  a v  a 2s.  co m-->
   background:yellow;
}

img {
   width:100%;
   display:block;
}

.main {
   max-width:1025px;
   background:red;
}

.rowWrapper {
   display:table;
   table-layout:fixed;
   width:100%;
}

.rowWrapper>div {
   display:table-row;
}

.rowWrapper>div>article {
   display:table-cell;
}

.rowWrapper>div>article {
   display:table-cell;
}

.rowWrapper>div>article:nth-of-type(1) {
   width:50.4475138123%;
}

.rowWrapper>div>article:nth-of-type(2){
}
.rowWrapper>div>article:nth-of-type(3) {
   width:50.4475138123%;
}

.titleContainer {
   background:grey;
}

.titleContainer>article:nth-of-type(2) {
   background:blue;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="main"> 
   <div class="rowWrapper"> 
    <div> 
     <article> 
      <img src="https://www.java2s.com/style/demo/Opera.png"> 
     </article> 
     <article></article> 
     <article> 
      <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
     </article> 
    </div> 
    <div class="titleContainer"> 
     <article> 
      <h3>Lorem ipsum dolor sit a</h3> 
     </article> 
     <article></article> 
     <article> 
      <h3>Lorem ipsum dolor s</h3> 
     </article> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials