Displaying tabular data with table head on left instead of on top

Question

I am having issues with my CSS. I am trying to make information display in 2 columns, denoted by the .left and .right classes.

You can see the issues at my jsFiddle

@Faust Yes....I guess this was a convoluted way of asking me what is wrong with my markup / css..you can view it by clicking on the 'Here' link at going to my js fiddle — JDV590, Apr 18 '12 at 19:29
I have made the appropriate edits to make this a more simple question — JDV590, Apr 18 '12 at 19:32
I actually think your original question was more clear; are you wanting the left hand column to be a repeatable set of the same elements (like a left-sided table header?). If so, the answers may be slightly different, where alternating spans may be less appropriate, and groups of items more so (i.e. more easily represented by a single function call). — chris, Apr 18 '12 at 19:51
On a sidenote mumis. JQM 1.1.0 final is out now. You should upgrade. Also using jQuery 1.7.2 will get you into some other issues later on. For JQM 1.0.1 use jQuery 1.6.4. For JQM 1.1.0 use jQuery 1.7.1. Trust me on this I have seen alot of questions where that was the only problem. P.S. question is clear enough. A fiddle is worth a thousand words. — codaniel, Apr 18 '12 at 19:54

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

EDIT: Altering answer based on comments.

You are displaying tabular data - so use Tables. You can avoid nested tables by using the tbody tag, as demonstrated by this similar question:

For this solution, what you'll do is create a table. Each TBODY will represent one 'group' of data. In each group, the first column will be for the metadata (like thead), and the second column will be the actual data:

<table>
  <tbody> <!-- First Set of Data -->
    <tr>
      <td> Sessions </td>
      <td> 1 </td>
    </tr>
    <tr>
      <td> Date </td>
      <td> 1/1/2003 </td>
    </tr>
    ...
  </tbody>
  <tbody>  <!-- Second set of Data -->
    <tr>
      <td> Sessions </td>
      <td> 5 </td>
    </tr>
    ...
  </tbody>
</table>

You can then style more easily using an external stylesheet, perhaps using the :nth-child selector and / or the colgroup tag or Javascript.

You might also get more answers if you re-name your question to something like "How to display tabular data with left hand column as key".

edited May 23 '17 at 12:29

Community

1
1

answered Apr 18 '12 at 19:39

chris

2,404
3
27
33

Your original solution was almost perfect. If I have something with many rows, I would like it to look something more like this: [JSFIDDLE Example] (http://jsfiddle.net/WSEH4/50/). I used your example, except I am still getting similar issues at the top left corner – JDV590 Apr 18 '12 at 20:24
I would like Sessions Date Topic Major Due Dates to show up on each row – JDV590 Apr 18 '12 at 20:26
I see what your trying to do. If your not going to be changing the layout based on size - if you always want it to look the same - then tables will probably be the best solution - is this the case? – chris Apr 18 '12 at 20:33
Although this solution didnt end up working for me because of factors outside my control, I accept this solution as the correct option if I was able to follow through and solve this issue – JDV590 Apr 20 '12 at 02:40

score 1 · Answer 2 · answered Apr 18 '12 at 19:41

Here's a way to do what you're trying to do without using aboslute positioning (which is prone to breaking).

http://jsfiddle.net/WSEH4/33/

Basically, using inline-blocks guarantees that elements will not overlap if the CSS is incorrect. However, the best solution to your problem would just be to use tables instead. Tables exist for situations like this, with a label/value system.

score 1 · Answer 3 · answered Apr 18 '12 at 19:43

1

Alternatively you can done it via floating. Example shown via demo.

http://jsfiddle.net/WSEH4/36/

answered Apr 18 '12 at 19:43

irfanmcsd

6,533
7
38
53

score 1 · Answer 4 · answered Apr 18 '12 at 19:43

I much prefer to use divs over spans: ( jsFiddle: http://jsfiddle.net/WSEH4/44/ )

HTML:

<!DOCTYPE html>

<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
    <div style="display: block;">
        <div class="child">Where</div>
        <div class="child">China</div>
        <div class="clear"/>

        <div class="child">Voltage</div>
        <div class="child">220 V</div>
        <div class="clear"/>

        <div class="child">Frequency</div>
        <div class="child">50 HZ</div>
        <div class="clear"/>

        <div class="child">Plug Type</div>
        <div class="child">USA</div>
        <div class="clear"/>
    </div>
</body>

CSS:

.child
{
    float: left;
    top: 6px;
    left: 6px;
    width: 25%;
    padding-right: 10px;
    white-space: nowrap;
    border-bottom: 1px solid #eee;
}

.clear
{
    clear: both;
    display: block;    
}

score 1 · Answer 5 · answered Apr 19 '12 at 08:49

Hey you can do this as like this

Css

div{
margin-top:10px;
}
.right{
float:left;
    width:50%;
border-right:solid 1px red;    
}
.left{
    float:right;  
}

HTML

<div style="display: block;width:200px;overflow: hidden;">

    <div class="right">China</div>
    <div class="left">Plug Type</div>

    <div class="right">220 V</div>
    <div class="left">Frequency</div>

    <div class="right">50 HZ</div>
    <div class="left">Voltage</div>

    <div class="right">USA</div>
    <div class="left">Where</div>



</div>

Live demo http://jsfiddle.net/rohitazad/WSEH4/52/

Displaying tabular data with table head on left instead of on top

5 Answers5