Databases
StackOverflow2013
Postsdbo
POForce <div>s to keep to one line in <td> cell
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POForce <div>s to keep to one line in <td> cell
    primarykey
    data
    text
    <p>I'm trying to loop through some data passed into a Jinja2 template and populate a table. I would like to split each <code>&lt;td&gt;</code> cell into more sub-columns <strong>if there is more information</strong>, the number of sub-columns within the <code>&lt;td&gt;</code> is dynamic. </p> <h2>Example 1</h2> <p>I would like each <code>&lt;td&gt;</code> to result in something like this (i.e. no matter how many sub-columns within each <code>&lt;td&gt;</code>, the new sub-column will be displayed in the same line):<br> <img src="https://i.stack.imgur.com/htnRF.png" alt="enter image description here"> </p> <h2>Example 2 ##</h2> <p>In this example, each new sub-column within the <code>&lt;td&gt;</code> is display below the previous one (I do not want this):<br> <img src="https://i.stack.imgur.com/Pc3PO.png" alt="enter image description here"></p> <p>If I take this little snippet of code and open it in the browser it works as I want it to (example 1).</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; .cell { display: block; } .col { float:left; /*display: inline;*/ } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table style="border:solid"&gt; &lt;thead&gt; &lt;tr&gt;&lt;th&gt;Example 1&lt;/th&gt; &lt;th&gt;Example 2&lt;/th&gt; &lt;th&gt;Example 3&lt;/th&gt;&lt;/tr&gt; &lt;/thead&gt; &lt;tr&gt; &lt;td&gt; &lt;div class="cell"&gt; &lt;div class='col'&gt; item 1 &lt;br /&gt; item 2 &lt;br /&gt; item 3 &lt;br /&gt; &lt;/div&gt; &lt;div class='col'&gt; item 1 &lt;br /&gt; item 2 &lt;br /&gt; item 3 &lt;br /&gt; &lt;/div&gt; &lt;div class='col'&gt; item 1 &lt;br /&gt; item 2 &lt;br /&gt; item 3 &lt;br /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;div class="cell"&gt; &lt;div class='col'&gt; item 1 &lt;br /&gt; item 2 &lt;br /&gt; item 3 &lt;br /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;div class="cell"&gt; &lt;div class='col'&gt; item 1 &lt;br /&gt; item 2 &lt;br /&gt; item 3 &lt;br /&gt; &lt;/div&gt; &lt;div class='col'&gt; item 1 &lt;br /&gt; item 2 &lt;br /&gt; item 3 &lt;br /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>However it does not work as expected in the template. If I use the same styling, the <code>&lt;td&gt;</code> does not widen to accommodate the new sub-column. The <code>&lt;td&gt;</code> does widen accommodate the text within each column.</p> <pre><code>&lt;table&gt; &lt;thead&gt;Some information about all the cells&lt;/thead&gt; {% for person in list_of_people%} &lt;tr&gt; &lt;td&gt; &lt;div class="cell"&gt; {% for item in person.activity %} &lt;div class='col'&gt; {% for element in item %} {{ loop.index }} {% if element['correct'] == True %} &amp;#10004; {% else %} &amp;#10007; {% endif %} &lt;br /&gt; {% endfor %} SCORE &lt;br /&gt;= {{stats[0]}} / {{stats[2]}} &lt;br /&gt; &lt;/div&gt; &lt;!-- col --&gt; {% endfor %} &lt;/div&gt; &lt;!-- attempt --&gt; &lt;/td&gt; &lt;/tr&gt; {% endfor %} &lt;/table&gt; </code></pre> <p>How can I ensure that each <code>&lt;div&gt;</code> inside each <code>&lt;td&gt;</code> stays in the same line and doesn't get pushed below the previous one?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USnicholaschris
    1. USnicholaschris
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COWhy are you using `div`s to display `tabular` data?
      singulars
      1. POForce <div>s to keep to one line in <td> cell
      1. USAsh Burlaczenko
    2. COyou can most likely achieve this with `display: table-cell` through `CSS` ... but then again, why aren't you using tables.
      singulars
      1. POForce <div>s to keep to one line in <td> cell
      1. USViridis
    3. COI am using a `<table>` but within the table I want to divide the `<td>` up into further columns depending on whether or not there is more information to put in there...
      singulars
      1. POForce <div>s to keep to one line in <td> cell
      1. USnicholaschris
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload