HebleV February 2016

Aligning image with respective tables using materializecss

Find full code here: http://codepen.io/anon/pen/NxErrR

I am trying to display different tables and its respective images. Below is the screenshot for actual requirement. This is the requirement. One And this is how far I have progressed. Two
It would be great if someone could help me in achieving this. Thanks in advance.

Note: I am using materializecss and would be nice to achieve this using the same.

   <div class="row">
     <div class="featuresanimate">
       <div id="features" class="section scrollspy">
         <div class="container">
           <h2 style="text-decoration:underline;text-align:center;font-  weight:bold;font-family:Comic Sans MS">Features</h2><br><br>
             <div class="features">
               <table style="width:100%">
                 <tr>
                   <img src="images/d.png" height="100" width="100">
                   <th >one</th>
                   <img src="images/a.png" height="100" width="100">
                   <th >two</th>
                 </tr>

                 <tr>
                   <td >profile</td>
                   <td >profile</td>
                 </tr>

                 <tr>
                   <td>profile</td>
                   <td>profile</td>
                 </tr>

                 <tr>
                   <td>profile</td>
                   <td>profile</td>
                 </tr>

                       

Answers


Alistair February 2016

You could put them in seperate divs

Unless you need to use tables for some reason?

http://codepen.io/anon/pen/VeVjgL


Karl Dawson February 2016

It looks like you're using the Materialize CSS framework. I would ditch the tables-for-layout approach and use the grid system provided by the framework. See a working Codepen demo here.

h3 {
  margin-top: 0;
  padding-left: 10px;
  color: #fff;
  background-color: #0d47a1;
}

img {
  float: left;
  margin-right: 15px;
}

.feature-set {
  float: right;
  width: calc(100% - 115px);
}

ul {
  padding-left: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>
<div class="row">
  <div class="featuresanimate">
    <div id="features" class="section scrollspy">
      <div class="container">
        <h2 style="text-decoration:underline;text-align:center;font-weight:bold;font-family:Comic Sans MS">Features</h2>
        <div class="features">
          <div class="col s6">
            <img src="http://placehold.it/100x100" height="100" width="100">
            <div class="feature-set">
              <h3>One</h3>
            <ul>
              <li>profile</li>
              <li>profile</li>
              <li>profile</li>
              <li>profile</li>
            </ul>
            </div>            
          </div>
          <div class="col s6">
            <img src="http://placehold.it/100x100" height="100" width="100">
            <div class="feature-set">
              <h3>Tw 

Post Status

Asked in February 2016
Viewed 1,891 times
Voted 11
Answered 2 times

Search




Leave an answer