HTML tbody только одна ширина столбца заголовка

Question

У меня проблема с HTML.Я хочу сделать таблицу с фиксированным заголовком и прокручиваемым телом.Тело (tbody) состоит из строк таблицы, а глава (thead) состоит из заголовков.Важно сказать, что тело генерируется при загрузке Jinja.

Вот скриншот таблицы .

И это то, что код, который генерирует таблицупохоже.Обратите внимание, что код Jinja работает отлично, единственная проблема заключается в том, что раздражающая ширина:

/*
 * 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;
}

<table width=100% height=100%><tr>
  <td class="events_column" width=50%>
    <div id="calendar_events">
        <h1>Eventos</h1>
        Haz click en el evento cuya ubicación quieras ver en el mapa.
        <div class="events_table_div">
            <table class="fancy_table scrollable_table">
                <thead>
                    <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>
        </div>
        <div class="buttons_table_div">
            <table class="fancy_table">
                <tr class="clickable" onclick="addAllMarker()"><td colspan="3">Mostrar todos los eventos</td></tr>
                <tr class="clickable" onclick="deleteMarkers()"><td colspan="3">Ocultar todos los eventos</td></tr>
            </table>
        </div>
    </div>
  </td>
  <td class="map_column" width=50%>
      <br>
      <div id="map" class="map"></div>
  </td>
</tr></table>

Answer 1

На самом деле вы можете использовать:

table {table-layout: fixed}

Answer 2

.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;
}

<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>