How to set a permanent width for a column in HTML tables?

Question

I have the following code:

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

My problem is that my column's width is adjusting to the content of the cells. If the content is too large, the column will grow to contain it, even though I've set a class with a width of 50 or 300px. How can I avoid this?

Is there something about this prior answer that didn't work for you? https://stackoverflow.com/questions/4185814/fixed-table-cell-width — Marc, Sep 15 '22 at 01:51

score 1 · Accepted Answer · edited Sep 15 '22 at 02:39

1

Maybe you can try add

table-layout:fixed
overflow: hidden;

.gastos {
    width: 50px;
    white-space: nowrap;
    table-layout:fixed;
}
.titulos_egresos {
    width: 300px;
    white-space: nowrap;
    overflow: hidden;
}

edited Sep 15 '22 at 02:39

Heretic Monkey

11,687
7
53
122

answered Sep 15 '22 at 02:23

rizaldodo

116
4

score 0 · Answer 2 · answered Sep 15 '22 at 03:00

try applying the gastos,titulos_egresos classes to th,td tags instead of h5 as shown below:

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

How to set a permanent width for a column in HTML tables?

2 Answers2