When sizing HTML table columns I used to use the colgroup and col tags to give a table column a specific width. I’ve learned this is not best practice with HTML5 although you will still see plenty of articles recommending this approach.
Continue reading “CSS table column width with HTML5”
A great WordPress theme for Bootstrap 3
If you are looking for a clean WordPress theme that uses Bootstrap 3, I can recommend Bootstrap Basic.
I had an issue when I first installed it so I raised it on the support forum and the author immediately made some changes and released a new version.
Install Compass on Mac OS X 10.11
Use the following command in Terminal to install Xcode command line tools (you don’t need the full application from the App Store)
xcode-select --install
Then install SASS and Compass with:
sudo gem install -n /usr/local/bin sass sudo gem install -n /usr/local/bin compass
then you can cd into your directory of choice and run compass compile to compile SASS into CSS.
Table content overflowing enclosing div
A block level element like this div is sized to fit the width of its parent, not the width of its content.
At the top level of a document the parent is typically the viewport (a viewport is the visible portion of the canvas).
At the top level of a document the parent is typically the viewport (a viewport is the visible portion of the canvas).
If you have a table with content that can’t be broken up because it doesn’t have spaces or there are lots of columns then the width may be greater than the viewport – especially if you are using a laptop or mobile browser.
In this instance the content will break out of the enclosing div.
| stuff@longstring | stuff@longstring | stuff@longstring | stuff@longstring | stuff@longstring | breakout |
To resolve this,
use style display:table
Works with IE 8 onwards and tells the div to display as a table.
| stuff@longstring | stuff@longstring | stuff@longstring | stuff@longstring | stuff@longstring | enclosed |
use style float:left
Works with IE6 onwards
When an element is floated it uses the value of defined width or auto in which case it shrinks to fit its content.
There’s a definition of shrink-to-fit by the W3C http://www.w3.org/TR/css3-box/#shrink-to-fit
| stuff@longstring | stuff@longstring | stuff@longstring | stuff@longstring | stuff@longstring | enclosed |