Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you have this -</p> <pre><code> &lt;style type="text/css"&gt; .cell { float: left; width: 100px; border: 1px solid; line-height: 1em; } &lt;/style&gt; &lt;div class="cell"&gt;TopLeft&lt;/div&gt; &lt;div class="cell"&gt;TopMiddlePlusSomeOtherTextWhichMakesItToLong&lt;/div&gt; &lt;div class="cell"&gt;TopRight&lt;/div&gt; &lt;br/&gt; &lt;div class="cell"&gt;BottomLeft&lt;/div&gt; &lt;div class="cell"&gt;BottomMiddle&lt;/div&gt; &lt;div class="cell"&gt;bottomRight&lt;/div&gt; </code></pre> <p>just switch to a vertical format with containing divs and use min-width in your CSS instead of width -</p> <pre><code> &lt;style type="text/css"&gt; .column { float: left; min-width: 100px; } .cell2 { border: 1px solid; line-height: 1em; } &lt;/style&gt; &lt;div class="column"&gt; &lt;div class="cell2"&gt;TopLeft&lt;/div&gt; &lt;div class="cell2"&gt;BottomLeft&lt;/div&gt; &lt;/div&gt; &lt;div class="column"&gt; &lt;div class="cell2"&gt;TopMiddlePlusSomeOtherTextWhichMakesItToLong&lt;/div&gt; &lt;div class="cell2"&gt;BottomMiddle&lt;/div&gt; &lt;/div&gt; &lt;div class="column"&gt; &lt;div class="cell2"&gt;TopRight&lt;/div&gt; &lt;div class="cell2"&gt;bottomRight&lt;/div&gt; &lt;/div&gt; &lt;br/&gt; </code></pre> <p>Of course, if you are displaying genuine tabular data it is ok to use a real table as it is semantically correct and will inform people using screen readers that is supposed to be in a table. It is using them for general layout or image-slicing that people will lynch you for.</p>
    singulars
    1. This table or related slice is empty.
    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. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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