Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The problem is that you want something left aligned to line up beneath something center aligned. Your best bet is probably to left align the headings and using some padding to provide space between the columns.</p> <p>HTML:</p> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;th class= "one"&gt;Quantity&lt;/th&gt; &lt;th class= "two"&gt;Info&lt;/th&gt; &lt;th class= "three"&gt;Prices&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class = "one"&gt;&lt;input type="text" name="quantity1" value=""/&gt;&lt;/td&gt; &lt;td class = "two"&gt;Cheap Monday Jeans 30/34 &lt;/td&gt; &lt;td class = "three"&gt;$39.99 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class = "one"&gt;&lt;input type="text" name="quantity2" value=""/&gt;&lt;/td&gt; &lt;td class = "two"&gt;Herschel Bag (free) &lt;/td&gt; &lt;td class = "three"&gt;$129.99 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class = "one"&gt;&lt;input type="text" name="quantity3" value=""/&gt;&lt;/td&gt; &lt;td class = "two"&gt;Diesel t-shirt (s) &lt;/td&gt; &lt;td class = "three"&gt;$59.99 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class = "one"&gt;&lt;input type="text" name="quantity4" value=""/&gt;&lt;/td&gt; &lt;td class = "two"&gt;Superdry Patrol Lite Jacket (m) &lt;/td&gt; &lt;td class = "three"&gt;$129.99 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class = "one"&gt;&lt;input type="text" name="quantity5" value=""/&gt;&lt;/td&gt; &lt;td class = "two"&gt;I love Canada t-shirt (s) &lt;/td&gt; &lt;td class = "three"&gt;$19.99 &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>And CSS:</p> <pre><code>.one { width: 13%; } .two { width: 30%; } .three { width: 30%; } th { text-align: left; } .two, .three { padding-left: 10%; } </code></pre> <p>For example: <a href="http://jsfiddle.net/cpmmk/" rel="nofollow noreferrer">http://jsfiddle.net/cpmmk/</a></p> <p><img src="https://i.stack.imgur.com/wDN3Z.png" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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