dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: CSS display:table-magic

  1. #1
    Join Date
    Jul 2010
    Location
    /ramdisk/
    Posts
    865

    CSS display:table-magic

    I have the code below as output from a php script. While I could mess with a pile of ugly loops and multidimensional arrays, I'd rather just fix it with some CSS (I'm going to add CSS anyways... right?).

    What I'd really like to do is turn rows into columns.
    My guess is that the CSS "display:table-******" properties could handle this problem, unfortunately I only really know how to use display:block, display:inline-block, display:none.
    You're welcome to throw in a container/wrapper if you need. Or if this problem can't be solved with CSS just let me know.
    I can also replace the first <td> of each <tr> with <th>, I'm pretty flexible on the tags.

    HTML Code:
    <table>
      <tr>
        <td>Column Heading 1</td>
        <td id="1" onclick="sqa(1,1)" >Less than 50</td>
        <td id="2" onclick="sqa(1,2)" >50-150</td>
        <td id="3" onclick="sqa(1,3)" >150-500</td>
        <td id="4" onclick="sqa(1,4)" >500-1000</td>
        <td id="5" onclick="sqa(1,5)" >Over 1000</td>
       </tr>
       <tr>
        <td>Column Heading 2</td>
        <td id="6" onclick="sqa(2,6)" >Outside</td>
        <td id="7" onclick="sqa(2,7)" >Classroom, Office, Conference Room</td>
        <td id="8" onclick="sqa(2,8)" >Small Banquet Hall, Small Theatre, Meeting Space, Lecture Hall</td>
        <td id="9" onclick="sqa(2,9)" >Large Banquet Hall</td>
        <td id="10" onclick="sqa(2,10)" >Auditorium, Performance Hall, Concert Venue</td>
      </tr>
      <tr>
        <td>Column Heading 3</td>
        <td id="11" onclick="sqa(3,11)" >3-11</td>
        <td id="12" onclick="sqa(3,12)" >3-12</td>
        <td id="13" onclick="sqa(3,13)" >3-13</td>
        <td id="14" onclick="sqa(3,14)" >3-14</td>
        <td id="15" onclick="sqa(3,15)" >3-15</td>
      </tr>
      <tr>
        <td>Column Heading 4</td>
        <td id="16" onclick="sqa(4,16)" >4-16</td>
        <td id="17" onclick="sqa(4,17)" >4-17</td>
        <td id="18" onclick="sqa(4,18)" >4-18</td>
        <td id="19" onclick="sqa(4,19)" >4-19</td>
      </tr>
      <tr>
        <td>Column Heading 5</td>
        <td id="20" onclick="sqa(5,20)" >5-20</td>
        <td id="21" onclick="sqa(5,21)" >5-21</td>
        <td id="22" onclick="sqa(5,22)" >5-22</td>
        <td id="23" onclick="sqa(5,23)" >5-23</td>
      </tr>
    </table>

  2. #2
    Hi,

    I have referred your code as you have given above.
    If you want to turn all rows into columns I will recommend you to use div tag instead of using table.

    Because you can get some tabular format(As you need) using div tag with some css properties like float,etc...

  3. #3
    Join Date
    Jul 2010
    Location
    /ramdisk/
    Posts
    865
    HTML Code:
        <div>Column Heading 1</div>
        <div id="1" onclick="sqa(1,1)" >Less than 50</div>
        <div id="2" onclick="sqa(1,2)" >50-150</div>
        <div id="3" onclick="sqa(1,3)" >150-500</div>
        <div id="4" onclick="sqa(1,4)" >500-1000</div>
        <div id="5" onclick="sqa(1,5)" >Over 1000</div>
    
        <div>Column Heading 2</div>
        <div id="6" onclick="sqa(2,6)" >Outside</div>
        <div id="7" onclick="sqa(2,7)" >Classroom, Office, Conference Room</div>
        <div id="8" onclick="sqa(2,8)" >Small Banquet Hall, Small Theatre, Meeting Space, Lecture Hall</div>
        <div id="9" onclick="sqa(2,9)" >Large Banquet Hall</div>
        <div id="10" onclick="sqa(2,10)" >Auditorium, Performance Hall, Concert Venue</div>
    
        <div>Column Heading 3</div>
        <div id="11" onclick="sqa(3,11)" >3-11</div>
        <div id="12" onclick="sqa(3,12)" >3-12</div>
        <div id="13" onclick="sqa(3,13)" >3-13</div>
        <div id="14" onclick="sqa(3,14)" >3-14</div>
        <div id="15" onclick="sqa(3,15)" >3-15</div>
    
        <div>Column Heading 4</div>
        <div id="16" onclick="sqa(4,16)" >4-16</div>
        <div id="17" onclick="sqa(4,17)" >4-17</div>
        <div id="18" onclick="sqa(4,18)" >4-18</div>
        <div id="19" onclick="sqa(4,19)" >4-19</div>
    
        <div>Column Heading 5</div>
        <div id="20" onclick="sqa(5,20)" >5-20</div>
        <div id="21" onclick="sqa(5,21)" >5-21</div>
        <div id="22" onclick="sqa(5,22)" >5-22</div>
        <div id="23" onclick="sqa(5,23)" >5-23</div>
    Yeah I can see how it'll come together now. The markup is starting to make sense.

    I would want to wrap each group of div tags into another div tag and a max-width for each "cell".

    Lets say the max width is 100px

    I would make the first group like this:
    <div style="max-width:100px;display:block;float:left;margin-left:0;">
    <div>Column Heading 1</div>
    <div id="1" onclick="sqa(1,1)" >Less than 50</div>
    <div id="2" onclick="sqa(1,2)" >50-150</div>
    <div id="3" onclick="sqa(1,3)" >150-500</div>
    <div id="4" onclick="sqa(1,4)" >500-1000</div>
    <div id="5" onclick="sqa(1,5)" >Over 1000</div>
    </div>
    <div style="max-width:100px;display:block;float:left;margin-left:100px;">
    <div>Column Heading 2</div>
    <div id="6" onclick="sqa(2,6)" >Outside</div>
    <div id="7" onclick="sqa(2,7)" >Classroom, Office, Conference Room</div>
    <div id="8" onclick="sqa(2,8)" >Small Banquet Hall, Small Theatre, Meeting Space, Lecture Hall</div>
    <div id="9" onclick="sqa(2,9)" >Large Banquet Hall</div>
    <div id="10" onclick="sqa(2,10)" >Auditorium, Performance Hall, Concert Venue</div>
    </div>

    Maybe throw a couple pixels extra in for browsers that feel the need to add their own padding and I'm set :P
    Maybe add an empty vertical spacing div to each "cell" to make them look a little nicer.. etc.

    Is this starting to look right?
    Last edited by eval(BadCode); 12-07-2010 at 09:04 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles