Databases
StackOverflow2013
Postsdbo
POCSS Table with one column taking remaining space
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Table with one column taking remaining space
    primarykey
    data
    text
    <p>I have tried now several things (and looked around here) and nothing worked so far. So I am going to ask.</p> <p><strong>What I want:</strong></p> <p>I have the following simple HTML:</p> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;td class="small"&gt;First column with text&lt;/td&gt; &lt;td class="extend"&gt;This column should fill the remaining space but should be truncated if the text is too long&lt;/td&gt; &lt;td class="small"&gt;Small column&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>The table itself should be 100% width of the parent container. I wish the first and last column (<code>.small</code>) to be as large as they need to be, so the content can fit into it without a line break (so pretty much what <code>white-space: nowrap</code> does). The middle column (<code>.extend</code>) should take the rest of the space (so the table will stay within 100% width of its parent container) and the text within <code>.extend</code> should be ellipsised before it needs to break to a seconds line.</p> <p>I've prepared a fiddle for this at <a href="http://jsfiddle.net/3bumk/" rel="noreferrer">http://jsfiddle.net/3bumk/</a></p> <p>With these background colors I would expect a result like:</p> <p><img src="https://i.stack.imgur.com/WIN3b.png" alt="Expected result to see"></p> <p>Is there any solution for this?</p> <p><strong>What I get:</strong></p> <p>My problem is, if I can make the text to stay in one row (having no line breaks), the table will always overflow its parent container width (and cause it to be scrollable), before having the idea to ellipsis the text in the middle column.</p> <p><strong>What is no solution (I often found):</strong></p> <p>It's no solution to set the first and third column to a 'fixed' with (percentage or pixel), because the content will have different length from time to time. It is possible to add as many <code>div</code> or <code>span</code> as needed (or get rid of the table all together - what I tried first, with <code>display</code> and <code>table</code> but I didn't find a working solution that way either).</p> <p>PS: It would be very nice if you could edit the fiddle to a working example, if you know one :-)</p> <p><strong>EDIT</strong> I am free to use divs instead of a table too!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTim Roes
    1. USTim Roes
    plurals
    1. This table or related slice is empty.
    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. VO
      singulars
      1. POCSS Table with one column taking remaining space
      1. This table or related slice is empty.
      1. VTUpMod
    1. COgive the center TD with style 100%, not sure
      singulars
      1. POCSS Table with one column taking remaining space
      1. USManish
    2. CO@Manish that's not working. It still causes the table to overflow its parent boundaries as long as the middle column also has `white-space: nowrap`. I also updated the fiddle to show that.
      singulars
      1. POCSS Table with one column taking remaining space
      1. USTim Roes
 

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