右边对齐pandas数据框在烧瓶中

时间:2018-03-28 19:24:55

标签: python html css pandas flask

我在烧瓶中创建API。我想在上传按钮对面显示pandas数据帧。我可以谷歌通过各种方式证明列标题/文本,但不是框架本身。使用的烧瓶代码是:

app = Flask(__name__)

@app.route('/upload', endpoint='upload_file1')

def upload_file1():
    df_table=data.head().to_html()   
    return render_template('upload.html', df_table=df_table)

html代码是:

<html>
<head>       
<title>CR prediction tool</title> 

</head> 

    <body bgcolor="#E6E6FA">


      <form action = "http://localhost:5000/uploader" method = "POST" 
         enctype = "multipart/form-data" >
         <input type = "file" name = "file"  />
         <input type = "submit" />
         {% block content %}
         <style  align= "float:right">
         </style>   
         {{df_table | safe}}
         {% endblock %} 

1 个答案:

答案 0 :(得分:0)

有很多方法可以像这样对齐html元素。这是一个简单的方法。将这两个元素包装在自己的div中,并使用css将div设置为display: inline-block,然后给出固定或百分比width。如果这有帮助,请告诉我。有关工作示例,请查看此jsfiddle:https://jsfiddle.net/35fy20Ls/4/

<style>
    .inline-block {
        display: inline-block;
        width: 40%;
    }
</style>
<div class="inline-block">
    <form action = "http://localhost:5000/uploader" method = "POST" enctype = "multipart/form-data" >
        <input type = "file" name = "file"  />
        <input type = "submit" />
    </form>
</div>
<div class="inline-block">
    {% block content %}
    {{df_table | safe}}
    {% endblock %} 
</div>