Databases
StackOverflow2013
Postsdbo
POCSS Table-Like alignment using no tables? (CSS RelativeLayout)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Table-Like alignment using no tables? (CSS RelativeLayout)
    primarykey
    data
    text
    <p>Wherever I go on the internet, I am constantly having it beat into me that I should not use Tables. Sadly, I am one of the few programmers who is stubborn enough to still be using them -- I frankly find the alignment and layout features of CSS inadequately powerful for me to, cold turkey, stop using tables. With my personal programmer idiosyncrasies set aside, I would like to try to attack one of my major discontentments with the CSS system:</p> <p>Let's say I want to have a layout like this:</p> <pre><code>+---+---+ | A | B | +---+---+ | C | D | +---+---+ </code></pre> <p>In the above example, I would like the widths of A and C to be the same, and the widths of <code>B</code> and <code>D</code> to remain the same.</p> <p>I would also like the heights of <code>A</code> and <code>B</code> to remain locked together, and I would like the heights of <code>C</code> and D to stay the same as each other.</p> <p>To clarify, if any element in a column gets wider, I'd like <em>all</em> of the elements in that column to get wider. And if any element in a row gets taller, I, again, want all of the elements in that very same row to get wider as well.</p> <p>What I have just described is the exact functionality of our old friend, the table. In my opinion, tables are very useful for these kinds of layouts! If I were to attempt something similar to that using CSS layouts, I might get something like this:</p> <pre><code>+-------+---+ | A | B | +---*---*---+ | C | D | +---+-------+ </code></pre> <p>Which would very much <em>NOT</em> be the kind of layout I am looking for. (<code>A</code> and <code>C</code> make jagged columns, as opposed to perfect, smooth columns as I would prefer)</p> <p>To put my problem simply, I could <em>really</em> use a way to, using CSS layouts (and NOT predefined widths or heights) align the position of an edge of one CSS box, to the position of an edge of a different CSS box. If CSS supported that one simple feature, I could instantly let go of tables forever, and create layouts beyond even the capabilities of tables! A good, but useless example of such power would be two disconnected boxes on opposite sides of a table, <em>dynamically</em> sharing exactly the same height and vertical position as each other.</p> <p>But unfortunately, in my searches around the internet, the most advanced alignment I've found so far is center, left, and right alignment. All alignment types that are not relative to OTHER elements, making them useless.</p> <p>All I want is just a way to align HTML elements to OTHER HTML elements without having to use tables! </p> <h1>EDIT</h1> <p>While picking the tags for this question, I came across a description that pretty much sums it all up:</p> <blockquote> <p>Relativelayout: A Layout where the positions of the children can be described in relation to each other or to the parent.</p> </blockquote> <p>Is there a CSS RelativeLayout? Or am I stuck using tables whenever I want to do this?</p> <p>I will accept the answer that comes closest to my desired functionality without using predetermined widths or heights (Including the answer "Nothing like that exists" if no one else provides something better).</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USGottlieb Notschnabel
    1. USGeorges Oates Larsen
    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
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS Table-Like alignment using no tables? (CSS RelativeLayout)
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCSS Table-Like alignment using no tables? (CSS RelativeLayout)
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POCSS Table-Like alignment using no tables? (CSS RelativeLayout)
      1. This table or related slice is empty.
      1. VTUpMod
    1. COPeople always get this wrong: this is exactly the situation where tables make sense and should be used. There is no sense in trying to mimic their behaviour in pure css. Tables should be avoided in many, many cases for layout purposes, but not always.
      singulars
      1. POCSS Table-Like alignment using no tables? (CSS RelativeLayout)
      1. USarkascha
    2. COIf you really want a table then a table is the answer. However, the question is why do you absolutely want this behavior ? Meaning they are some cases when people think they want a table, but in fact a responsive css solution can be as good or even better.
      singulars
      1. POCSS Table-Like alignment using no tables? (CSS RelativeLayout)
      1. USmb14
 

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