'HTML tbody only is only one header column width

I have a problem in HTML. I want to make a table with a fixed header and a scrollable body. The body (tbody) is composed of the rows of the table, and the head (thead) is composed of the headers. It's important to say that the body is generated on load by Jinja.

Here is a screenshot of the table.

And this is what the code that generates the table looks like. Note that Jinja code works perfectly, the only problem is that annoying width:

/*
 * 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>
htmlcssjinja2


Solution 1:[1]

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

Solution 2:[2]

Actually u could use:

table { table-layout: fixed }

Solution 3:[3]

Try this:

thead,
tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nandita Sharma
Solution 2 N.A
Solution 3 pppery

Related Questions