Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I wouldn't say it's <em>wrong</em> precisely, it's more that table cells don't have the same box model as a div. You can see this by playing around with the following:</p> <ul> <li>Use <code>.outerWidth()</code> and compare to <code>.width()</code></li> <li>Add <code>display:block;</code> to your CSS for <code>th,td</code> and compare widths with the default table cell rendering.</li> </ul> <p>I think you'll see what I mean. This is also documented at <a href="http://blog.anofsinger.com/2008/03/table-cell-box-model.html" rel="nofollow">http://blog.anofsinger.com/2008/03/table-cell-box-model.html</a>.</p> <p>If you view the example <a href="http://codepen.io/morewry/pen/pqGhv" rel="nofollow">http://codepen.io/morewry/pen/pqGhv</a> here my intention is to show that the interior width of a table cell won't be the same as the interior width of a <code>div</code>, even if both are given <code>width:200px</code>.</p> <p>However, while it might not be the width that you'd expect, and the width will potentially be different in each browser, the cells ought to be consistent <em>within</em> each browser.</p> <p>(At least, that's what I'd expect.) I'd expect this:</p> <ul> <li>You set a width of, say, 200 pixels to a table cell.</li> <li>Firefox might return a width of 199 and IE a width of 201. Those widths are accurate and reflect each browser's table cell box model.</li> <li>If you set the same width to the <code>th</code>, it will render at the same width as the <code>td</code> as long as it has the same border and padding width.</li> </ul> <p>But after looking at the example again today I saw that, either automatically setting the same width to each <code>th</code> as to its corresponding <code>td</code> with JavaScript or setting a generous equal width to both with CSS, the <code>th</code> sometimes ended up a different width from the <code>td</code> in the same browser. (I have some sort of inarticulable thoughts about this, but suffice it to say it's really interesting when this discrepancy appears [and disappears]. I compared it setting a <code>width</code> vs a <code>min-width</code> vs giving <code>width:100%</code> to the whole table, etc.)</p> <p>I take it your goal is a fixed table header. For that, I do feel that it's much better to do as Mike showed and keep it all in one table using thead and tbody. You break the "semantics" by using two different tables--the <code>th</code> no longer has any relationship with the <code>td</code>, except visually.</p> <ul> <li>However, you could use JavaScript something like this (it works in all my browsers at least and might be better than browser detection): <a href="http://codepen.io/morewry/pen/toCqs" rel="nofollow">http://codepen.io/morewry/pen/toCqs</a></li> <li>Using markup/CSS like this also fixed the problem for me <a href="http://codepen.io/morewry/pen/gjELD" rel="nofollow">http://codepen.io/morewry/pen/gjELD</a> without JavaScript. Uncertain if this works everywhere (I don't have IE9 for one) or if it can be used in the context you need.</li> </ul>
    singulars
    1. This table or related slice is empty.
    1. POjquery width() seems wrong in every browser I try except FF4
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USmorewry
    1. USmorewry
    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. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COSo your idea is to replace `display:table-cell;` by `display:block;` ? For what purpose?
      singulars
      1. PO
      1. USc-smile
    2. COGoodness, no. What would be the point of that? It's not a solution, it's a demonstration of how the box model for table-cell is not the same as for block. Therefore you can't expect to get the same result for .width() or .outerWidth() on a td as you would for a div -- and that result and how it varies will vary by browser.
      singulars
      1. PO
      1. USmorewry
    3. COWhich leads me to realize I may have been unclear. Does "it's most likely giving you the right width--the actual rendered space inside the cell, it's just that the number isn't one you expected to see." make it any better?
      singulars
      1. PO
      1. USmorewry
 

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