Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

    table column size

    I'm trying to make a table with several columns. I would like to force one of the columns to expand completely so that the text it contains does not run over into the second line like this:

    Code:
             |  header  | header
    header 1 |     2    |    3
    ------------------------------
             |          |
    instead of this:

    Code:
    header | header | header
       1   |   2    |    3
    --------------------------
           |        |
    Is this possible? thanks for the help.
    Last edited by mxb7642; 08-06-2007 at 04:10 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,879
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Code:
    <table>
    	<col id="col1" />
    	<col id="col2" />
    	<col id="col3" />
      <tr>
        <th scope="col">header 1</th>
        <th scope="col">header 2</th>
        <th scope="col">header 3</th>
      </tr>
      <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
      </tr>
      …
    </table>
    Code:
    #col1 {width: ??px;}

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    probably should've mentioned this in my original post: the data in the table varies so the size of column 1 will change which is why using an absolute size will not work for me

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,879
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Ah then scrap the size thing and prevent the text in the first cell from wrapping instead:
    Code:
    <table>
      <tr>
        <th id="header1" scope="col">header 1</th>
        <th scope="col">header 2</th>
        <th scope="col">header 3</th>
      </tr>
      <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
      </tr>
      …
    </table>
    Code:
    #header1 {white-space: nowrap;}

  • #5
    New Coder
    Join Date
    Jul 2007
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you. exactly what i needed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •