htmlcsstwitter-bootstrap

Bootstrap 3 stack image in the same row


I'm trying to stack the image on top of all the text, with the image on the same row with some text.

<!DOCTYPE html>
<html>

  <head>
    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    <!-- jquery ui -->
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <!-- bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <table>
    <tbody>
      <tr>
        <td rowspan='6'>
          <img src="http://www.google.com/search?q=professor&rlz=1C5CHFA_enUS699US707&espv=2&biw=1280&bih=703&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiUn_nPgJ3QAhUO7WMKHZjDD_oQ_AUIBigB#imgrc=MR0mBgD1-8vtJM%3A" height='170' width='170' style='padding-left: 30px;'/>
        </td>
      </tr>
      <tr>
        <td>Bob</td>
      </tr>
      <tr><td>bob@example.com</td></tr>
      <tr><td>23</td></tr>
      <tr><td>Contact</td></tr>
      <tr><td>Party</td></tr>
      <tr><th>Start Term</th><td>2016.01.01</td></tr>
      <tr><th>End Term</th><td>2016.01.01</td></tr>
      <tr><th>Term</th><td>today</td></tr>
      <tr><th>Office</th><td>here</td></tr>
      <tr><th>State</th><td>CA</td></tr>
      <tr><th>Fax</th><td>here</td></tr>
      <tr><th>Birthday</th><td>today</td></tr>
      <tr><th>Social Links</th><td>here</td></tr>
    </tbody>
    </table>
  </body>

</html>

Please see my code in action at: https://plnkr.co/edit/YgcNPhX8hc4HnNgZALBr?p=preview

The tricky part is the image is in the row: <td rowspan='6'> which takes 6 tds into one, and I want to stack it on top of everything using bootstrap3.

Please refer to the pictures to see what I'm talking about:

Before:
enter image description here

After:
enter image description here

Thank you guys in advance!


Solution

  • I edited the plunker link as per your requirements. I don't have an account on plunker so my code will not be saved on the link. Here is the code for your reference:

        <!DOCTYPE html>
    <html>
    <style type = "text/css">
    
      table{
        width:100%;
        height:100%;
        align:center;
        text-align:center;
      }
    
      img{
        align:center;
        background-size:cover;
      }
    
      tbody{
        align:left;
        text-align:left;
      }
    
    </style>
      <head>
        <!-- jquery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    
        <!-- jquery ui -->
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    
        <!-- bootstrap -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
      </head>
    
      <body>
        <table>
        <thead>
          <tr>
            <td>
              <img src="http://www.google.com/search?q=professor&rlz=1C5CHFA_enUS699US707&espv=2&biw=1280&bih=703&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiUn_nPgJ3QAhUO7WMKHZjDD_oQ_AUIBigB#imgrc=MR0mBgD1-8vtJM%3A" height='170' width='170' style='padding-left: 30px;'/>
            </td>
          </tr>
          <tr><td>Bob</td></tr>
          <tr><td>bob@example.com</td></tr>
          <tr><td>23</td></tr>
          <tr><td>Contact</td></tr>
          <tr><td>Party</td></tr>
          </thead>
          <tbody>
          <tr><th>Start Term</th><td>2016.01.01</td></tr>
          <tr><th>End Term</th><td>2016.01.01</td></tr>
          <tr><th>Term</th><td>today</td></tr>
          <tr><th>Office</th><td>here</td></tr>
          <tr><th>State</th><td>CA</td></tr>
          <tr><th>Fax</th><td>here</td></tr>
          <tr><th>Birthday</th><td>today</td></tr>
          <tr><th>Social Links</th><td>here</td></tr>
        </tbody>
        </table>
      </body>
    
    </html>
    

    I added css style selectors to get the effect. Also removed rowspan attribute from the img td. You should not need 6 tds to get the desired effect from your image. You can put it in one td in a row, and apply the background-size:cover property to stretch the image proportionally into a row.