how to keep HTML table and a side by image in the same size

Question

i have HTML table that is produced from styler object in python pandas and one image i need to have them both in the same size this is how i create HTML:

with open('example.html','w') as exp:


example_html=exp.write(" <div style='float:left'>") 
example_html=exp.write(plunge_results[_j].report_new.render()) #render styler object to HTML table
example_html=exp.write("</div>") 
example_html=exp.write(" <div style='float:left'>") 
example_html=exp.write(img_tag) 
example_html=exp.write("</div>")

give them a class and set the dimensions of them in css. Also theres no table there. — Craicerjack, May 11 '17 at 10:59
Isn't this the same question that you already asked here: http://stackoverflow.com/questions/43879880/how-to-put-png-side-by-side-to-a-html-table-using-python — Mike Scotty, May 11 '17 at 11:08

score 0 · Answer 1 · answered May 11 '17 at 11:08

You can use something as the below one

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

#imgdiv img {
  height: 100%;
  width: 100%;
}

<div class="row">
  <div class="col">Keep your Table here
  <table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
  </div>
  <div id="imgdiv" class="col">Keep your Image Here
  <img src="https://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View">
  </div>
</div>

Thanks let me try it,Have already something very similar but did not work — chessosapiens, May 11 '17 at 11:10

how to keep HTML table and a side by image in the same size

1 Answers1