HTMLテーブルとサイドバイサイドを同じサイズに保つ方法

Question

私はpython pandasと1つのイメージでスタイラオブジェクトから生成されるHTMLテーブルを持っています。これは同じサイズで両方を持たなければなりません。これは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>") 

Answer 1

は、あなたは彼らにクラスを与える1

.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>