Table With 5 Columns, Use CSS To Determine Each Column Width

Discussion in 'Web Design and Development' started by kolax, Aug 6, 2012.

  1. kolax macrumors G3

    Mar 20, 2007
    I have a table that consists of 5 columns, and the content is populated by PHP/MySQL. I have tried using HTML to define the column widths, which works fine, however as the content varies, the widths change by a few pixels. Not a big deal, but I'd rather keep them from doing that.

    I'm already defining the table colouring scheme, padding, borders etc using CSS. I've found using:

    table.db-table {table-layout: fixed;}

    Will stop the column width's adjusting by a pixel or few each time the content inside the table changes.

    However, I cannot define each column width in CSS. Is this possible?
  2. sk3pt1c macrumors 6502a


    Nov 29, 2005
    a simulacrum
    you could possibly assign id or class names to each column or just use the child selector to target the n-th child of the table to target them.

    i guess if you have a lot of columns that would be a drag though...
  3. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    You can't reliably control the width of a table cells of varying widths and expect cross browser support as well. I suggest either not using widths at all and let the table adjust or wrap the td contents in a DIV (or any other block level elements) and target that element, which means something like: <td><div id='col1'>data</div></td> for example. If the table itself is created via code, dynamically, you could also assign classes and ID then and apply to each td. But keeping it simple is best advice (don't use widths).
  4. Kwill macrumors 68000


    Mar 10, 2003
    Can you use column percentages of the overall defined width?
  5. kolax thread starter macrumors G3

    Mar 20, 2007
    I did try a few tricks, including percentages which I couldn't get to work.

    The width of the overall table remains constant, but the individual cell widths aren't fixed and I couldn't get them to remain fixed.
  6. Dolorian macrumors 65816


    Apr 25, 2007
    You can use the CSS :nth-child selector to target specific columns and assign each the width you want.

    This would need a couple of things to work in all browsers tho, you should include Modernizr and Selectivizr in your site to make the CSS3 selectors available in browsers that do not support them (like Internet Explorer, for example).

    Using the :nth-child selector can be a bit confusing at first, so here are a couple of examples:

    table tr:nth-child(3) { width: 20% } - This would select the third column.

    table tr:nth-child(5) { width: 50% } - This would select the fifth column.

    table tr:nth-child(2n) { width: 15% } - This would select every second column.

    Hope you find this helpful!
  7. kolax thread starter macrumors G3

    Mar 20, 2007
    Thanks Evoken, that sounds exactly what I'm trying to do.

    I'll have a play with your examples later and see if I can get it to do what I want.
  8. bradnywells macrumors newbie

    May 27, 2014

    for column with better use like this...



    More examples...CSS Table styling

  9. Flood123, May 28, 2014
    Last edited: May 28, 2014
  10. 960design macrumors 68030

    Apr 17, 2012
    Destin, FL
    <cough>the undead thread<cough,cough>
    I was working on a calendar and just used unordered lists to generate the content. So much easier to style.
  11. NutsNGum macrumors 68030


    Jul 30, 2010
    Glasgow, Scotland
  12. SuperRob macrumors 6502

    Mar 14, 2011
    If you're adhering to current guidelines, Tables should only be used for tabular data. The OP never mentioned what he was displaying, but I usually find when I'm having a hard time getting what I want to display properly, I'm probably not using the correct elements for it.

    In this case, I would have just had each bit of data in their own DIV, rather than tables or an unordered list (because the data may already be an unordered list in the db). Then, I can use CSS to set them however I like, and if later on we reskin the site and don't want columns anymore, it's easy to just change the CSS and BOOM ... new layout without having to change the HTML.
  13. 960design macrumors 68030

    Apr 17, 2012
    Destin, FL
    What is the definition of tabular data, really?
    A calendar is really just a list of days. The display depends on the device, when you are viewing my calendar on a larger display it looks like the traditional calendar, when you view it on a smaller screen the calendar becomes a vertical listing of days. Much easier to read and swipe through.

    I only use html tables when I'm actually displaying data that belongs in a spreadsheet. Calendars, not so much. Payroll, yep ( but I'm softening them up ). :)
  14. jtara macrumors 65816

    Mar 23, 2009
    If you are tempted to use table layout for something that isn't a table, you probably should be using flex box CSS.

    Not for old browsers, though, and you do have to deal with multiple prefixed versions and 3 different variations.

Share This Page