Таблица HTML- граница не отображается при запуске приложения flask

#python #html #css #flask #virtualenv

#python #HTML #css #flask #virtualenv

Вопрос:

Я запускаю простое приложение flask, используя виртуальную среду, и все работало хорошо, пока я не смог отобразить границы html. Попросил друга просмотреть его, который знает некоторый html, и он не мог понять это.

app.py:

 from flask import Flask, render_template, url_for
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime

app = Flask(__name__)
app.config['TEMPLATES_AUTO_RELOAD'] = True
app.config['SQLALCHEMY_DATABASE_URI'] = "sqlite:///test.db"
db = SQLAlchemy(app)

class Todo(db.Model):
    id = db.Column(db.Integer, primary_key = True)
    content = db.Column(db.String(200), nullable = False)
    data_created = db.Column(db.DateTime, default=datetime.utcnow)

    def __repr__(self):
        return '<Task %r>' % self.id

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

base.html:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href="../static/css/main.css">
    {% block head %}{% endblock %}
</head>
<body>
    {% block body %}{% endblock %}
</body>
</html>

index.html:

 {% extends 'base.html' %}

{% block head %}

{% endblock %}

{% block body %}
<div class="content">
    <h1>Task Master</h1>

    <table>
        <tr>
            <th>Task</th>
            <th>Added</th>
            <th>Actions</th>
        </tr>
        <tr>
            <td>yeet</td>
            <td>yah</td>
            <td>
                <a href="">Delete</a>
                <br>
                <a href="">Update</a>
            </td>
        </tr>
    </table>
</div>
{% endblock %}

main.css:

 body {
    margin: 0;
    font-family: sans-serif;
}

Я использую Windows и запускаю приложение flask через Visual Studio code. Я предполагаю, что это может быть связано с flask? Я понятия не имею, как исправить эту проблему, и просмотрел другие сообщения, но ничего не сработало.

Редактировать: для пояснения текст отображается, а ссылки доступны для просмотра, текст просто немного перемешан в левом углу без границ для таблицы.

1. Вы пытаетесь добавить border только table или к таблице-строке tr и табличным данным td ?

2. Поможет скриншот того, как таблица отображается в браузере. Но я бы сказал, что это связано не с Flask, а скорее с HTML, CSS или даже браузером (возможно, отрегулируйте масштаб или размер символов? ) Итак, попробуйте другой браузер. Также ответ @Alex Bota должен работать

Ответ №1:

Попробуйте добавить этот код в свою таблицу стилей

 table, th, td {
  border: 1px solid black;
}

Ответ №2:

Попробуйте другой браузер.

Также попробуйте это:

 table, th, td {
  border: 1px solid black;
  margin: 1px;
  padding: 1px;
}