Travis Millburn Travis Millburn - 3 months ago 12
HTML Question

How to create small table on right side of HTML page

I'm trying to create a minimum-width two column html table on the right side of an HTML page.

Current ideas:


  • Should I create a third column in front of my values and somehow maximize its width leaving two compact columns all the way to the right?

  • Should I be wrapping the entire table in a
    <div>
    and using some right justification?

  • I'm using Bootstrap CSS, is there an even easier way to do this with a JS class?



Thank you in advance,

<table cellspacing="0" class="table table-bordered">
<tr>
<td>SPACER</td>
<td>PRICE UPDATE: </td>
<td>{{price_update}}</td>
</tr>
<tr>
<td>SPACER</td>
<td>POSITION UPDATE: </td>
<td>{{pos_update}}</td>
</tr>
</table>

Answer

A little reading up on the bootstrap grid system may help (http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works).

You can use offset and the columns to do this pretty easily. for example:

<div class="col-xs-offset-9 col-xs-3">
<!-- insert table here -->
</div>

Bootstrap works in 12s (which is why you need the offset of 9, or whatever will offset the size of the column you need). The xs is the screen size you want it to be displayed on, so in this case xs will display on the right hand side of every screen size but if you want it displayed on an iPad or PC only you'll have to change that, and then you can add how you want it displayed for smaller devices.

Also make sure you put all columns in a container and a row.

Comments