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

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

  1. macrumors G3

    Kilamite

    Joined:
    Mar 20, 2007
    Location:
    Scotland
    #1
    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. macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #2
    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. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    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. macrumors 68000

    Kwill

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

    Kilamite

    Joined:
    Mar 20, 2007
    Location:
    Scotland
    #5
    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. macrumors 65816

    Dolorian

    Joined:
    Apr 25, 2007
    #6
    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. thread starter macrumors G3

    Kilamite

    Joined:
    Mar 20, 2007
    Location:
    Scotland
    #7
    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. macrumors newbie

    Joined:
    May 27, 2014
    #8
    column

    for column with better use like this...

    td:nth-child(1)
    {
    width:100px;
    }
    td:nth-child(2)
    {
    width:200px;
    }
    td:nth-child(3)
    {
    width:300px;
    }

    .....
    .......

    More examples...CSS Table styling

    bradny
     
  9. Flood123, May 28, 2014
    Last edited: May 28, 2014

    macrumors 6502a

    Flood123

    Joined:
    Mar 28, 2009
    Location:
    Living Stateside
  10. macrumors 65816

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #10
    <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. macrumors 68030

    NutsNGum

    Joined:
    Jul 30, 2010
    Location:
    Glasgow, Scotland
    #11
    Always.
     
  12. macrumors regular

    Joined:
    Mar 14, 2011
    #12
    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. macrumors 65816

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #13
    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. macrumors 65816

    Joined:
    Mar 23, 2009
    #14
    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