Home/ Questions/Q 9159931
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T13:36:49+00:00

I’m encountering a problem when styling an dynamic generated table. The user can choose

  • 0

I’m encountering a problem when styling an dynamic generated table. The user can choose how many columns there have to be, some of them have got a fixed length. How can I let the other give a percentage of the space left, without having to specify the exact width of the columns every time AND without ending up with different column widths with different data/different browsers?

Example:

<style type="text/css">
table{
    width:800px;
    border:1px solid #CCCCCC;
   /* table-layout: fixed; */
}

table td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border:1px solid #EEEEEE;
}

table tbody td.active{
    text-align:center;
    width:100px; /* fixed */
}

table tbody td.option{
    width:100px; /* fixed */
}


table tbody td.nonfixed{
    width:auto;
}
</style>
<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Description</td>
            <td>Active</td>
            <td colspan="2">Options</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="5"><a href="">+ Add new row</a><td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td class="nonfixed">[Name 1]</td>
            <td class="nonfixed">[Description 1]</td>
            <td class="active">[X]</td>
            <td class="option">Edit</td>
            <td class="option">Delete</td>
        </tr>
        <tr>
            <td class="nonfixed">[Name 2]</td>
            <td class="nonfixed">[Description 2]</td>
            <td class="active">[0]</td>
            <td class="option">Edit</td>
            <td class="option">Delete</td>
        </tr>
    </tbody>
</table>

In the example both “nonfixed” columns should have the exact same width. This should also work when the user adds a nonfixed column or switches the first column with the last etc.

Who’s able to help me out?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I see two possible approaches… either use a script to calculate the flexible-width columns’ widths and average them, or use nested tables to split the two flex cols at 50%:

    <table>
  <tr>
    <td class="fixed"></td>
    <td class="fixed"></td>
    <td class="fixed"></td>

    <td class="flex-wrapper">
      <table width="100%">
        <tr>
          <td width="50%"></td>
          <td width="50%"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
    • 0