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

    Join Date
    Jun 2009
    Posts
    676
    Rep Power
    7

    Table col widths not always the same.


    I actually not sure if the final solution to this sits in HTML, PHP, Javascript, or even CSS. I posted I believe everything I need below...

    The issue is, usually the page loads just fine. I manually set the column widths. But sometimes... The table will build and each column will be of equal size. That table width will always remain the same.

    PHP builds the table content from MySQL.
    Table columns defined within <colgroup>
    CSS holds attribute: table-layout: fixed;
    Javascript offers column sorting.

    I am GUESSING it's something with the 'table-layout: fixed;' but I needed that set for something, which I dun remember off the top of my head. Thanks for any help.

    PHP Code:
    <?php
                            
    include('modules/rolodex/functions.php');
                            if(isset(
    $_GET['action']) && ($_GET['action'] == "add" || $_GET['action'] == "create" || $_GET['action'] == "edit" || $_GET['action'] == "update" || $_GET['action'] == "view")) {
                              include(
    'modules/rolodex/profile.php');
                            } else { 
    ?>
                          <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
                          <script>
                            $(document).ready(function(){
                              $('#table tbody tr').click(function(){
                                window.location = $(this).attr('href');
                                return false;
                              });
                            });
                          </script>
                          <TABLE id="heading">
                            <TR id="function">
                              <TD align="left"><INPUT type="button" value=" Add New " onClick="parent.location='?loc=rolodex&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" style="border-bottom: 1px solid black;border-left: 1px solid black;border-right: 1px solid black;">
                            <script src="modules/rolodex/sorttable.js"></script>
                            <TABLE id="table" class="sortable">
                              <colgroup>
                                <col width="290">
                                <col width="160">
                                <col width="110">
                                <col width="170">
                                <col width="90">
                                <col width="250">
                                <col width="100">
                              </colgroup>
                              <THEAD>
                                <TR>
                                  <TH width="287">Company</TH>
                                  <TH width="157">Name</TH>
                                  <TH width="107">Position</TH>
                                  <TH width="167">Number</TH>
                                  <TH width="87">Type</TH>
                                  <TH width="247">E-Mail</TH>
                                  <TH width="115" style="border-right: 1px solid black;">Notes</TH>
                                </TR>
                              </THEAD>
                              <TBODY>
    <?php buildListing(); ?>
                              </TBODY>
                            </TABLE>
                          </DIV>
                          </DIV>
                          <script>
                            var $rows = $('#table tbody tr');
                            $('#search').keyup(function() {
                              var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
                              $rows.show().filter(function() {
                                var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                                return !~text.indexOf(val);
                              }).hide();
                            });
                          </script>
                          <?php ?>
    PHP Code:
    function buildListing() {
      global 
    $link;
      
    $statement $link->prepare("SELECT customers.`Customer Name`,rolodex.`FLName`,rolodex.`Position`,rolodex.`Number`,rolodex.`Type`,rolodex.`E-mail`,rolodex.`Note`,rolodex.`ID` FROM `rolodex` INNER JOIN `customers` ON rolodex.`CustomerID`=customers.`ID` ORDER BY customers.`Customer Name`");
      
    $statement->execute();
      
    $statement->bind_result($col1,$col2,$col3,$col4,$col5,$col6,$col7,$col8);
      while (
    $statement->fetch()) {
        echo 
    '                            <TR class="highlightable" href="?loc=rolodex&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";
      }
      
    $statement->close();

    EDIT: I guess to toss in one thing that made this hard to do in the first palce was simply build a table with column widths set. That's all.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Jul 2003
    Posts
    3,381
    Rep Power
    594
    This is most likely an HTML issue or more accurately, browser. I never had much luck with how browsers rendered tables so I always use fixed column widths in my code.
    There are 10 kinds of people in the world. Those that understand binary and those that don't.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    676
    Rep Power
    7
    Well, I'm aiming for fixed widths so there is no variance, but it seems perhaps I'm doing it wrong or something. Tables are usually simple/basic with my past luck. ^_^
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Jul 2003
    Posts
    3,381
    Rep Power
    594
    I use CSS to format my tables. I think the use of most attributes in tr and td tags are depreciated anyway. Try using CSS and then post your issues in the CSS forum.
    There are 10 kinds of people in the world. Those that understand binary and those that don't.

IMN logo majestic logo threadwatch logo seochat tools logo