Databases
StackOverflow2013
Postsdbo
POcss: table-row: Way to force one table row to take full height of table and push second row out of visible area
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcss: table-row: Way to force one table row to take full height of table and push second row out of visible area
    primarykey
    data
    text
    <p>This is a similar post: <a href="https://stackoverflow.com/questions/426398/css-javascript-to-force-html-table-row-on-a-single-line">force table row into single line</a> but instead of forcing the content to disappear I'm trying to force the actual row to disappear. I'm using css display: tables to get content vertically centered in the div</p> <p>So I have a site with the general set-up of this:</p> <pre><code>------------------------------------------------- |Row1 | ------------------------------------------------- |Row2 | ------------------------------------------------- </code></pre> <p>I have the html set up as:</p> <pre><code>&lt;div class="A"&gt; //display: table &lt;div class="B"&gt; //display: table-row, height: 100% // ROW 1 &lt;div class="C"&gt; display: table-cell vertically centered contents go here &lt;/div&gt; &lt;/div&gt; &lt;div class="B"&gt; //display: table-row // ROW 2 &lt;div class="C"&gt; display: table-cell vertically centered contents go here &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>By setting the height of my "b" div's to 100% I'm trying to force them to take up the full height of the table (so that only one will be visible at a time – then I'm pushing them up or down with javascript).</p> <p>The problem is that the table is growing to show both table rows, Row 2 is always visible. I don't want to use display: none.</p> <p>Also, the table height is variable so I can't set the table to i.e. 200px and the table row to 200px.</p> <p>You can see a version of what the javascript will do here: <a href="http://jsfiddle.net/pappley/BGy6R/12/" rel="nofollow noreferrer">jsfiddle</a>. Note, the fiddle is a fixed height so I achieved the vertical centering with margins. In the example above, I need the height to be variable so I have to use another method to vertically center the content in the divs (thus my choice of display: table)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USpappley
    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
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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