Question

我正在尝试渲染旨在在页面上显示熊猫数据框的模板。它显示了数据框，但在数据框周围添加了奇怪的图案，例如

我希望数据框看起来不错，并且在表的内部和外部都有适当的填充。

这是我渲染模板的方式。渲染result.html

时遇到问题

@app.route('/company-recommendation', methods=['GET', 'POST'])
def company_recommendation():
    if request.method == 'POST':  # this block is only entered when the form is submitted
        try:
            title = request.form.get('title')
            w_descrip = int(request.form.get('descrip'))
            w_indust = int(request.form.get('indust'))
            w_type = int(request.form.get('type'))
            w_size = int(request.form.get('size'))
            w_specs = int(request.form.get('specs'))

            calculate_all_scores(title, df_work, w_descrip, w_indust, w_type, w_size, w_specs)
            result = get_recommendations(df_work)
            new_df = df_work.loc[[result[0], result[1], result[2], result[3], result[4]]]
            new_df.index = new_df.index.map(lambda x: str(x).upper())
            result = new_df[['spec_scores', 'industry_scores', 'type_scores', 'cosine_scores','size_scores', 'total_scores','type', 'industry', 'specialties']]

            pd.set_option('display.max_colwidth', -1)
            tables = [result.to_html(classes='table table-hover', header="true")]
            return render_template("result.html", result=tables, name=title.upper())
            #return render_template("result.html", result=result, name=title.upper())
        except Exception as e:
            error = 'Exception Occurred : '+str(e)+' \nGo back and try again !!'
            return error

    return render_template("form.html")

result.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Company Similarity</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style type="text/css">
        h1{
            margin: 30px 0;
            padding: 0 200px 15px 0;
            border-bottom: 1px solid #E5E5E5;
        }
        h4{
            margin: 30px 0;
            padding: 0 200px 15px 0;
            border-bottom: 1px solid #E5E5E5;
        }
        .bs-example{
            margin: 20px;
        }

    </style>

</head>


<body>
    <div class="bs-example">
        <h1> RECOMMENDED COMPANIES </h1>
        <h4> Best 5 Matches for {{name}}</h4>
        <div class="table-responsive">
            {{result | safe}}
        </div>

    </div>
</body>
</html>

熊猫数据框未正确显示html

0 个答案: