這個問題在這里已經有了答案： 固定表格單元格寬度 （7個答案） 2 小時前關閉。
我有以下代碼：
.gastos {
width: 50px;
white-space: nowrap;
}
.titulos_egresos {
width: 300px;
white-space: nowrap;
}<table class="table table-bordered border-dark table-sm">
<thead>
<tr class="table-active">
<th scope="col">
<h5 class="text-center titulos_egresos">1. Detalle de sueldos y cargas sociales</h5>
</th>
<th scope="col">
<h5 class="text-center gastos">Gastos A</h5>
</th>
<th scope="col">
<h5 class="text-center gastos">Gastos B</h5>
</th>
<th scope="col">
<h5 class="text-center gastos">Gastos C</h5>
</th>
<th scope="col">
<h5 class="text-center gastos">Gastos D</h5>
</th>
<th scope="col">
<h5 class="text-center gastos">Total</h5>
</th>
</tr>
</thead>
<tbody>
<!--For each gastos A-->
{{#each gastos_a}}
<tr class="">
<td> {{titulo}}</td>
<td class="">${{monto_parcial}}</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<table>我的問題是我的列的寬度正在調整到單元格的內容。如果內容太大，即使我設定了一個寬度為 50 或 300 像素的類，列也會增長到包含它。我怎樣才能避免這種情況？
uj5u.com熱心網友回復：
也許你可以嘗試添加
table-layout:fixed
overflow: hidden;
.gastos {
width: 50px;
white-space: nowrap;
table-layout:fixed;
}
.titulos_egresos {
width: 300px;
white-space: nowrap;
overflow: hidden;
}
uj5u.com熱心網友回復：
嘗試將 gastos,titulos_egresos 類應用于 th,td 標簽而不是 h5，如下所示：
<table class="table table-bordered border-dark table-sm">
<thead class="table-active">
<th scope="col" class="titulos_egresos">
<h5 class="text-center ">1. Detalle de sueldos y cargas sociales</h5>
</th>
<th scope="col" class="gastos">
<h5 class="text-center ">Gastos A</h5>
</th>
<th scope="col" class="gastos">
<h5 class="text-center ">Gastos B</h5>
</th>
<th scope="col " class="gastos">
<h5 class="text-center ">Gastos C</h5>
</th>
<th scope="col" class="gastos">
<h5 class="text-center ">Gastos D</h5>
</th>
<th scope="col" class="gastos">
<h5 class="text-center gastos">Total</h5>
</th>
</thead>
<tbody>
<!--For each gastos A-->
{{#each gastos_a}}
<tr class="">
<td class="titulo"> {{titulo}}</td>
<td class="gastos">${{monto_parcial}}</td>
<td class="gastos"></td>
<td class="gastos"></td>
<td class="gastos"></td>
<td class="gastos"></td>
</tr>
<table>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/508195.html