HTML tbody only 只有一个标题列宽

Posted 2023-05-08

【中文标题】HTML tbody only 只有一个标题列宽

【英文标题】：HTML tbody only is only one header column width

【发布时间】：2018-10-30 06:08:00

【问题描述】：

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

这是screenshot of the table.

这就是生成表格的代码的样子。请注意，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>

【参考方案1】：

其实你可以用：

表格表格布局：固定

【参考方案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>

【讨论】：

我根据自己的需要稍微修改了这个答案，但效果很好！非常感谢:)