We help IT Professionals succeed at work.

CSS - how to fix the width of columns in a table.

Rita Byrne
Rita Byrne asked
on
Low Priority
39 Views
Last Modified: 2019-11-04
I have a table which was created as part of a CRM system. The width of the column changes depending the size of the data field. I need to fix the width of the columns. Can anybody advise what i need to do to fix the column width in the table. Current coding is as below:

<table border="2" cellpadding="1" cellspacing="1" style="width: 700px;">
      <tbody>
            <tr>
                  <td>Rent A/C No. {AccountReference}</td>
                  <td>Name: {TenantName}</td>
            </tr>
            <tr>
                  <td>Address:{TenantAddress}</td>
                  <td>Telephone Contact: {TenantPhone}</td>
            </tr>
            <tr>
                  <td>Eircode: {TenantEircode}</td>
                  <td>Email: {TenantEmail}</td>
            </tr>
      </tbody>
</table>

Thanks in advance
Comment
Watch Question

CERTIFIED EXPERT

Commented:
Hi,

Instead of playing with the size like you do, as you will encounter issues for sure (especially if you have multilingual system or use different device). I would use a way to adapt the column width automatically.

I highly recommend the use of Datatables for all your tables as it is very powerful and flexible and have everything ready to use (filter, order, export to file etc).
This have a responsive option too, to see all columns even on small device.
https://datatables.net/extensions/responsive/examples/initialisation/option.html

Also it is not recommended to use inline CSS...

Or at least you can use Bootstrap your can use the responsive class for the table.
https://getbootstrap.com/docs/4.3/content/tables/#responsive-table
Rita ByrneIS Project Leader

Author

Commented:
Thanks for the response. I'm afraid I don't know enough about CSS to understand the response but I will check out the links. The code I specified was code generate by a system when I added a table rather than code I wrote myself. Sounds like what I've asked isn't possible or it isn't simply done anyway.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.