Databases
StackOverflow2013
Postsdbo
POHow can I fix a table row height in a 100% height table with a DOCTYPE specified using CSS?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I fix a table row height in a 100% height table with a DOCTYPE specified using CSS?
    primarykey
    data
    text
    <p>This is a follow up question to that at <a href="https://stackoverflow.com/questions/495194/can-i-create-a-html-table-width-a-percentage-height-but-pixel-accurate-row-height">Can I create a HTML table width a percentage height but pixel accurate row heights?</a>.</p> <p>I have a table in a HTML page that will be used for tabular data (so I don't want an answer based around divs). This needs to be rendered at 100% height with the top row having a fixed size and the second row stretching to fit the rest of the available area.</p> <p>I have used the following code:</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;table style="border-collapse:collapse;height:100%;width:100%;"&gt; &lt;tr&gt; &lt;td style="border:solid 1px black;height:100px"&gt;1&lt;/td&gt; &lt;td style="border:solid 1px black"&gt;2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="border:solid 1px black"&gt;3&lt;/td&gt; &lt;td style="border:solid 1px black"&gt;4&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This works as I require it to.</p> <p>The problem is, when I put this in an ASP.NET page created in Visual Studio, it adds a DOCTYPE element. After adding the DOCTYPE (and setting the CSS for the html and body tags to include height:100%), the top row of the table is much bigger than the bottom row and neither row is of a fixed height.</p> <p>I know I should use a DOCTYPE and not rely on "quirks mode" in Internet Explorer to ensure future compatibility. However, I have tried all the DOCTYPEs I can find to try and change this behaviour to what I need but can't get it to work. It does work in Firefox but the job is for an Intranet where the users use IE7.</p> <p>If you want to see the problem, try the following:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html style="height:100%"&gt; &lt;body style="height:100%"&gt; &lt;table style="border-collapse:collapse;height:100%;width:100%;"&gt; &lt;tr&gt; &lt;td style="border:solid 1px black;height:100px"&gt;1&lt;/td&gt; &lt;td style="border:solid 1px black"&gt;2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="border:solid 1px black"&gt;3&lt;/td&gt; &lt;td style="border:solid 1px black"&gt;4&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Does anyone know the answer?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USBaffled by ASP.NET
    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. VO
      singulars
      1. POHow can I fix a table row height in a 100% height table with a DOCTYPE specified using CSS?
      1. UScbrulak
      1. VTFavorite
    2. VO
      singulars
      1. POHow can I fix a table row height in a 100% height table with a DOCTYPE specified using CSS?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow can I fix a table row height in a 100% height table with a DOCTYPE specified using CSS?
      1. This table or related slice is empty.
      1. VTDownMod
    1. CO-1 Working solution was already posted to this in that question http://stackoverflow.com/questions/495194/can-i-create-a-html-table-width-a-percentage-height-but-pixel-accurate-row-height/495219#495219
      singulars
      1. POHow can I fix a table row height in a 100% height table with a DOCTYPE specified using CSS?
      1. UScletus
    2. CO@cletus: That solution doesn't work for me in standards mode. The #bottom div is as tall as the window, with 100px on top of that for #top, so I get a scrollbar.
      singulars
      1. POHow can I fix a table row height in a 100% height table with a DOCTYPE specified using CSS?
      1. USmercator
    3. COYup. Doesn't work for me either.
      singulars
      1. POHow can I fix a table row height in a 100% height table with a DOCTYPE specified using CSS?
      1. USBaffled by ASP.NET
 

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