HTML tbody只有一个标题列宽

Question

我的HTML存在问题。我想制作一个带有固定标题和可滚动主体的表。主体（tbody）由表格的行组成，头部（thead）由标题组成。重要的是要说身体是由Jinja负载产生的。

这是screenshot of the table.

这就是生成表格的代码。请注意，Jinja代码工作正常，唯一的问题是恼人的宽度：

<span class="link" onclick="window.open('http://website.com','_blank');">Website</span>

/*
 * Makes the body of the table scrollable.
 */
.scrollable_table tbody{
    display: block;
    overflow-y: scroll;
    max-height: 70vh;
}

/*
 * Table custom style.
 */
.fancy_table {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

.fancy_table td, .fancy_table th {
    border: 1px solid #ddd;
    padding: 8px;
}

.fancy_table tr:nth-child(even){background-color: #f2f2f2;}

.fancy_table tr:hover {background-color: #ddd;}

.fancy_table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

Answer 1

＆＃13;

＆＃13;

.scrollable_table tbody{
    display: block;
    overflow-y: scroll;
    max-height: 70vh;
}
.scrollable_table thead{
    display: block;
}
.scrollable_table tr,     .scrollable_table th {
    display: flex;
}

/*
 * Table custom style.
 */
.fancy_table {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

.fancy_table th {
    WIDTH :33.3%;
}
.fancy_table td, .fancy_table th {
    border: 1px solid #ddd;
    padding: 8px;
}

.fancy_table tr:nth-child(even){background-color: #f2f2f2;}

.fancy_table tr:hover {background-color: #ddd;}

.fancy_table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

＆＃13;

<table class="fancy_table scrollable_table">
    <thead style="margin-right: 17px;">
        <tr>
            <th>Evento</th>
            <th>Fecha</th>
            <th>Ubicación</th>
        </tr>
    </thead>
    <tbody>
        {% for each in events %}
        <tr class="clickable" onclick="{% if 'location' in each %}deleteMarkers(); addMarker('{{each['id']}}');{% endif %}">
            <td>{% if 'summary' in each %}{{each['summary']}}{% else %}---{% endif %}</td>
            <td>{% if 'start' in each %}{{each['start']['date']}}{% else %}---{% endif %}</td>
            <td>{% if 'location' in each %}{{each['location']}}{% else %}---{% endif %}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

实际上你可以使用：

  

table {table-layout：fixed}