Databases
StackOverflow2013
Postsdbo
POResponsive images in a fluid-width table (max-width)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResponsive images in a fluid-width table (max-width)
    primarykey
    data
    text
    <p>Consider the following piece of code:</p> <p><strong>HTML:</strong></p> <pre><code>&lt;div&gt; &lt;img src="http://placehold.it/600x150" /&gt; &lt;/div&gt; </code></pre> <p><strong>CSS:</strong></p> <pre class="lang-css prettyprint-override"><code>div { max-width: 200px } img { max-width: 100% }​ </code></pre> <p>The image will never be wider than 200px, regardless of its native size. So far so good.</p> <p>Here's the fiddle: <a href="http://jsfiddle.net/PeAAb/" rel="nofollow noreferrer">http://jsfiddle.net/PeAAb/</a></p> <hr> <p>However, if the parent element has its <code>display</code> set to <code>table</code>:</p> <pre class="lang-css prettyprint-override"><code>div { max-width: 200px; display: table } </code></pre> <p>the image magically expands to its native width, expanding the <code>table</code> with it.</p> <p>Here's the fiddle: <a href="http://jsfiddle.net/PeAAb/1/" rel="nofollow noreferrer">http://jsfiddle.net/PeAAb/1/</a></p> <hr> <p>Same happens with an actual table: <a href="http://jsfiddle.net/PeAAb/2/" rel="nofollow noreferrer">http://jsfiddle.net/PeAAb/2/</a></p> <hr> <p><strong>Question:</strong> Is this expected behavior? If so, what can be done to work around this issue?</p> <p>Setting the parent's <code>width</code> (even a percentage-based width) instead of <code>max-width</code> correctly squeezes the image back into its box, but is not a solution. I need the parent to be fluid (I'm using this for the main structure of the site, so that I can have <a href="http://jsfiddle.net/89GME/" rel="nofollow noreferrer">the sidebar HTML appear after the main content in the source, but with the sidebar being fixed width</a>).</p> <p>Also, <a href="https://stackoverflow.com/questions/9147255/why-doesnt-ie-respect-table-width-with-fluid-image-child#answer-9147563">setting <code>table-layout</code> to <code>fixed</code></a> seems to have <a href="http://jsfiddle.net/PeAAb/3/" rel="nofollow noreferrer">no effect</a> here.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USJoseph Silber
    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. VO
      singulars
      1. POResponsive images in a fluid-width table (max-width)
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POResponsive images in a fluid-width table (max-width)
      1. USberto77
      1. VTFavorite
    3. VO
      singulars
      1. POResponsive images in a fluid-width table (max-width)
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI'm trying to build something responsive in SharePoint 2010, which has a really nasty habit of wrapping nested tables around things. If you know of a solution to this (that works back as far as IE8) I'd love to hear about it. @pKs's solution (display:block;) fails in IE8/9 here :(
      singulars
      1. POResponsive images in a fluid-width table (max-width)
      1. USOlly Hodgson
 

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