Databases
StackOverflow2013
Postsdbo
POHTML CSS Responsive Table & CSS Before
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML CSS Responsive Table & CSS Before
    primarykey
    data
    text
    <p>My aim is to create responsive tables design that look good when viewing on mobiles (width under 480px).</p> <p>I have the following markup for my table:</p> <pre><code>&lt;table class="table eventlist"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Date&lt;/th&gt; &lt;th&gt;Time&lt;/th&gt; &lt;th&gt;Duration&lt;/th&gt; &lt;th&gt;Location&lt;/th&gt; &lt;th&gt;Cost&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tr&gt; &lt;td data-title="Code"&gt;AAC&lt;/td&gt; &lt;td data-title="Company"&gt;AUSTRALIAN AGRICULTURAL COMPANY LIMITED.&lt;/td&gt; &lt;td data-title="Price" class="numeric"&gt;$1.38&lt;/td&gt; &lt;td data-title="Change" class="numeric"&gt;-0.01&lt;/td&gt; &lt;td data-title="Change %" class="numeric"&gt;-0.36%&lt;/td&gt; &lt;td data-title="Open" class="numeric"&gt;$1.39&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>And the following CSS:</p> <pre><code>/* Landscape phones and down */ @media (max-width: 480px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; display:none; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; white-space: normal; text-align:right; } td:before { padding-right: 10px; white-space: nowrap; text-align:left; font-weight: bold; } /* Label the data */ td:before { content: attr(data-title); } } </code></pre> <p>My table ends up looking like this:</p> <p><img src="https://i.stack.imgur.com/n2MNC.png" alt="enter image description here"></p> <p>Would you say this is a good user friendly responsive design?</p> <p>How can I edit the line: </p> <pre><code> td:before { content: attr(data-title); } </code></pre> <p>So that it reads the <code>&lt;th&gt;</code> for the column?</p> <p>Here is a live example: <a href="http://jsfiddle.net/liammccann1992/n4rUG/2/" rel="nofollow noreferrer">JS Fiddle</a></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. USLmC
    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. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHTML CSS Responsive Table & CSS Before
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou can not select an attribute value of other elements with `content:attr(…)`, only for the element that the rule actually applies to.
      singulars
      1. POHTML CSS Responsive Table & CSS Before
      1. USCBroe
    2. COSo you couldnt do :attr(parent) or something?
      singulars
      1. POHTML CSS Responsive Table & CSS Before
      1. USLmC
    3. CONope, you can’t. You can either redundantly put that info into another `data-` attribute on each of your TD elements, or you will have to use JavaScript to get the text from the TH.
      singulars
      1. POHTML CSS Responsive Table & CSS Before
      1. USCBroe
 

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