Как изменить размер поля Flask wtform?

Question

Новое в Flask и веб-разработке!

У меня есть простое приложение с панелью навигации и таблицей с одной строкой в ​​теле html. Я включил StringField, SelectField, IntegerField, FloatField и DateField в разных столбцах таблицы. Из-за поля таблицы выходит за рамки размера экрана и добавляет горизонтальную полосу прокрутки ниже страницы. Я хочу сжать таблицу, чтобы она не выходила за рамки экрана. Если я удаляю эти поля wtform , то таблица помещается на экране. Попробовал пару вещей, упомянутых здесь, но не работает. Единственный найденный ответ о том, как изменить размер TextAreaField . Не могу понять, как изменить размеры этих полей .

# forms.py

from flask_wtf import FlaskForm
from wtforms import StringField, IntegerField, FloatField, SelectField
from wtforms.validators import DataRequired
from wtforms.fields.html5 import DateField

class DataForm(FlaskForm):
    field_1 = StringField('field_1', validators=[DataRequired()])
    field_2 = StringField('field_2', validators=[DataRequired()])
    field_3 = IntegerField('station_id', validators=[DataRequired()])
    field_4 = DateField('date', format='%m/%d/%y')
    field_5 = SelectField('field_5', choices=[('m1', 'model_1'), ('m2', 'model_2'), ('m3', 'model_3')]) 
    field_6 = SelectField('field_6', choices=[('i1', 'item_1'), ('i2', 'item_2'), ('i3', 'item_3')])
    field_7 = SelectField('field_7', choices=[('i1', 'item_1'), ('i2', 'item_2'), ('i3', 'item_3')]) 
    field_8 = FloatField('field_8', validators=[DataRequired()])
    field_9 = FloatField('field_9', validators=[DataRequired()])
    field_1 = FloatField('field_10', validators=[DataRequired()])

# routes.py

from flask import render_template, Blueprint
from flaskblog.tables.forms import HVLForm

tables = Blueprint('tables', __name__)

@tables.route('/table', methods=['GET','POST'])
def hvl():
    hvlform = HVLForm()
    return render_template('table.html', form = hvlform)

# HTML

{% extends "layout.html" %}
{% block content %}
    <div>
        <table>
            <tr>
                <th> Field_1 </th>
                <th> Field_2  </th>
                <th> Field_3  </th>
                <th> Field_4  </th>
                <th> Field_5  </th>
                <th> Field_6  </th>
                <th> Field_7 </th>
                <th> Field_8 </th>
                <th> Field_9 </th>
                <th> Field_10  </th>
            </tr>
            <tr>
                <td> {{ form.field_1}} </td>
                <td> {{ form.field_2}} </td>
                <td> {{ form.field_3}} </td>
                <td> {{ form.field_4}} </td>
                <td> {{ form.field_5}} </td>
                <td> {{ form.field_6}} </td>
                <td> {{ form.field_7}} </td>
                <td> {{ form.field_8}} </td>
                <td> {{ form.field_9}} </td>
                <td> {{ form.field_10}} </td>
            </tr>
        </table>
    </div>
{% endblock content %}

# CSS

body {
width: 100%;
height: 100%;
background: #fafafa;
color: #333333;
margin-top: 5rem;
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

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

td,th {
    text-align:left;
}