2

I'm trying to loop through some data passed into a Jinja2 template and populate a table. I would like to split each <td> cell into more sub-columns if there is more information, the number of sub-columns within the <td> is dynamic.

Example 1

I would like each <td> to result in something like this (i.e. no matter how many sub-columns within each <td>, the new sub-column will be displayed in the same line):
enter image description here

Example 2 ##

In this example, each new sub-column within the <td> is display below the previous one (I do not want this):
enter image description here

If I take this little snippet of code and open it in the browser it works as I want it to (example 1).

<html>
<head>
<style type="text/css">
.cell {
    display: block;
}
.col {
    float:left;
    /*display: inline;*/
}
</style>
</head>
<body>
<table style="border:solid">
    <thead>
        <tr><th>Example 1</th>
        <th>Example 2</th>
        <th>Example 3</th></tr>
    </thead>
    <tr>
        <td>
            <div class="cell">
                <div class='col'>
                    item 1 <br />
                    item 2 <br />
                    item 3 <br />
                </div>
                <div class='col'>
                    item 1 <br />
                    item 2 <br />
                    item 3 <br />
                </div>
                <div class='col'>
                    item 1 <br />
                    item 2 <br />
                    item 3 <br />
                </div>
            </div>
        </td>
        <td>
            <div class="cell">

                <div class='col'>
                    item 1 <br />
                    item 2 <br />
                    item 3 <br />
                </div>
            </div>
        </td>
        <td>
            <div class="cell">
                <div class='col'>
                    item 1 <br />
                    item 2 <br />
                    item 3 <br />
                </div>
                <div class='col'>
                    item 1 <br />
                    item 2 <br />
                    item 3 <br />
                </div>

            </div>
        </td>
    </tr>

</table>
</body>
</html>

However it does not work as expected in the template. If I use the same styling, the <td> does not widen to accommodate the new sub-column. The <td> does widen accommodate the text within each column.

<table>
<thead>Some information about all the cells</thead>
{% for person in list_of_people%}
<tr>

<td>
  <div class="cell">
  {% for item in person.activity %}
    <div class='col'>
    {% for element in item %}
      {{ loop.index }}
        {% if element['correct'] == True %}
          &#10004;
        {% else %}
          &#10007;
        {% endif %}
      <br />
    {% endfor %}
    SCORE <br />= {{stats[0]}} / {{stats[2]}}
    <br />
    </div> <!-- col -->
  {% endfor %}
  </div> <!-- attempt -->
</td>

</tr>
{% endfor %}
</table>

How can I ensure that each <div> inside each <td> stays in the same line and doesn't get pushed below the previous one?

nicholaschris
  • 1,401
  • 20
  • 27

4 Answers4

4

Using display: flex in the outer div.attempt will prevent the inner div from going on to the next line.

I used flexbox like so (see this answer): 

.attempt {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
Community
  • 1
  • 1
nicholaschris
  • 1,401
  • 20
  • 27
0

Edited answer.

Consider using a non-block element for the columns within the td; a span element works.

This would look like this:

table
  tr
    td
      span blammy /span
      span hooty /spam
      span kapow /span
    /td
  /tr
/table

You should be able to set a width on the span elements so the columns line up from row to row.

Also, if necessary, display:inline-block might help.

Here is an example fiddle

DwB
  • 37,124
  • 11
  • 56
  • 82
0

use .col{float:left; width:33%;} Result: http://jsfiddle.net/

n1kkou
  • 3,096
  • 2
  • 21
  • 32
  • What if there is only one column in that ``? I wasn't that clear but not every `` in a row or column would have more columns inside it. – nicholaschris Dec 11 '13 at 16:06
  • 2
    make a `for` loop in `
    ` . And use the css for each column class: `.col1{width:100%;} .col2{width:50%} .col3{width:33%}`
     – n1kkou Dec 11 '13 at 16:13
  • This is a good suggestion, however, there could be infinitely many sub-columns within the ``. – nicholaschris Dec 11 '13 at 16:59
  • Then generate a table for each column. And wrap each `element` in a `td` of that `table` – n1kkou Dec 11 '13 at 17:39
0

Why are you using div's in a table to create columns? You can achieve the same effect with only a table:

<table>
  <thead>
    <tr>
      <th colspan="3">Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        item 1 <br />
        item 2 <br />
        item 3 <br />
      </td>
      <td>
        item 1 <br />
        item 2 <br />
        item 3 <br />
      </td>
      <td>
        item 1 <br />
        item 2 <br />
        item 3 <br />
      </td>
    </tr>
  </tbody>
</table>

Example

Jarno
  • 653
  • 5
  • 13