#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    677
    Rep Power
    7

    Table column width


    This is actually first time I've built a long table where I need it to scroll, have headers, and be sortable. ^_^

    The issue is simple between the TH headers, and the TD data. 5 columns. No matter how I seem to define each, I cannot get header/data widths to match. I can get CLOSE by using different widths, but no match in the end. Any left/right border/padding I have are matching for the two. Any ideas why this would be?

    As far as this current code is set, the TD widths I enter are ignored, and the width spans as wide as needed for widest item on list. N sorry I can't offer view of site. Database customer has me using has private info.
    Code:
                          <TABLE id="heading">
                            <TR id="function">
                              <TD align="left"><INPUT type="button" value=" Add New " onClick="parent.location='?loc=tore&action=add'" /></TD>
                              <TD align="center">Search: <INPUT type="text" id="search" placeholder="Type to search" /></TD>
                              <TD align="right"><INPUT type="button" value=" Close " onClick="parent.location='?loc=main'" /></TD>
                            </TR>
                          </TABLE>
                          <DIV id="outer">
                          <DIV id="innera">
                            <script src="modules/tore/sorttable.js"></script>
                            <TABLE id="table" class="sortable">
                              <THEAD>
                                <TR>
                                  <TH width="150">Name</TH>
                                  <TH width="100">Department</TH>
                                  <TH width="115">Manager</TH>
                                  <TH width="110">Type of Leave</TH>
                                  <TH width="90">Begin</TH>
                                  <TH width="90">End</TH>
                                  <TH width="100" style="border-right: 1px solid black;">Status</TH>
                                </TR>
                              </THEAD>
                              <TBODY>
    <?php buildListing(); ?>
                              </TBODY>
                            </TABLE>
    PHP Code:
    function buildListing() {
      global 
    $link;
      
    $statement $link->prepare("SELECT `Username`,`Department`,`Manager`,`Type`,`StartDate`,`EndDate`,`Approved`,`ID` FROM `timeoff` ORDER BY `StartDate`");
      
    $statement->execute();
      
    $statement->bind_result($col1,$col2,$col3,$col4,$col5,$col6,$col7,$col8);
      
    $i 1;
      while (
    $statement->fetch()) {
        if(
    $i != 1) {
          echo 
    '                            <TR class="highlightable" href="?loc=tore&action=view&id=' $col8 '"><TD>' $col1 '</TD><TD>' $col2 '</TD><TD>' $col3 '</TD><TD>' $col4 '</TD><TD>' $col5 '</TD><TD>' $col6 '</TD><TD>' $col7 "</TD></TR>\n";
        } else {
          echo 
    '                            <TR class="highlightable" href="?loc=tore&action=view&id=' $col8 '"><TD width="150">' $col1 '</TD><TD width="100">' $col2 '</TD><TD width="115">' $col3 '</TD><TD width="110">' $col4 '</TD><TD width="90">' $col5 '</TD><TD width="90">' $col6 '</TD><TD>' $col7 "</TD></TR>\n";
          
    $i++;
        }
      }
      
    $statement->close(); 
    Code:
    #table {
      table-layout: fixed;
    }
    
    #table thead tr th {
      border-top: thin solid black;
      border-bottom: thin solid black;
      border-left: 1px solid black;
      cursor: pointer;
      font-weight: bold;
      overflow: hidden;
      padding-left: 2px;
      text-align: left;
      white-space: nowrap;
    }
    
    #table tbody tr td {
      border-left: 1px solid black;
      cursor: default;
      overflow: hidden;
      padding-left: 2px;
      text-align: left;
      white-space: nowrap;
    }
    Last edited by Triple_Nothing; March 15th, 2013 at 10:22 AM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    677
    Rep Power
    7
    I missed a few CSS lines I just now see relate. Especially the third one. If I remove p'position: absolute;' then columns line up as desired, but... Then the TH items drop back down into the scroll area with the list items, instead of just above the top scroll arrow, as desired... :-/

    Code:
    #outer {
      margin: 0px auto 48px auto;
      padding: 64px 0px 48px 0px;
      position:relative;
      width: 775px;
    }
    
    #innera {
      height: 500px;
      overflow: auto;
      width: 775px;
    }
    
    #outer thead tr {
      height: 24px;
      position:absolute;
      top: 45px;
      left: 0px;
    }

IMN logo majestic logo threadwatch logo seochat tools logo