为什么生成后表格单元格的高度会发生变化？

Question

我正在使用 Go 生成 HTML 模板，并在模板内生成包含动态数据的表格：

<table>
    <tbody>
    <tr>
        <td>From</td>
        <td>To</td>
        <td>Rate</td>
        <td>7-day avg</td>
    </tr>
    {{range .ExchangeRates}}
    <tr>
        <td>{{.From}}</td>
        <td>{{.To}}</td>
        <td>{{.Rate}}</td>
        <td>{{.SevenDayAverage}}</td>
    </tr>
    {{end}}
    </tbody>
</table>

但是我收到的桌子上有像这里这样的褶皱单元格。

我该如何解决这个问题？我需要格式正确的表格

Answer 1

尝试对表格应用 CSS 样式，以确保单元格的间距和大小均匀。您可以使用 border-collapse、padding 和 text-align 等 CSS 属性来控制表格的外观。

如果需要，根据需要调整 CSS 样式以获得所需的表格外观。

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }
</style>

<table>
    <thead>
        <tr>
            <th>From</th>
            <th>To</th>
            <th>Rate</th>
            <th>7-day avg</th>
        </tr>
    </thead>
    <tbody>
        {{range .ExchangeRates}}
        <tr>
            <td>{{.From}}</td>
            <td>{{.To}}</td>
            <td>{{.Rate}}</td>
            <td>{{.SevenDayAverage}}</td>
        </tr>
        {{end}}
    </tbody>
</table>