I have a HandsOnTable table (with a couple of additions for user-requests) and a C3 chart (which needs to fill horizontal space) and can't get them living alongside each other nicely.
https://jsfiddle.net/horacebury/2vc606wx/13/
I /think/ these two DIVs should be able to be floated, but when I do they either don't (float) or stop the tooltip of the C3 chart OR stop some of the middle column editing from working:
<div>
<table class="tgh"><tr><td>Auxilliary Power</td></tr></table>
<div id="example"></div>
<table class="tg">
<tr>
<td class="tg-yw4l" ng-repeat="item in items track by $index">{{item}}</td>
</tr>
</table>
</div>
<div id="c3chart"></div>
Not sure how I did this, but I'm pretty sure it's a bodge:
https://jsfiddle.net/horacebury/2vc606wx/15/
<div style="float: right;">
<table class="tgh">
<tr>
<td>Auxilliary Power</td>
</tr>
</table>
<div id="example"></div>
<table class="tg">
<tr>
<td class="tg-yw4l" ng-repeat="item in items track by $index">{{item}}</td>
</tr>
</table>
</div>
<div id="c3chart" style="width: 65%;"></div>
Related
<div class="table-responsive">
<table class="table">
<thead>
Head
</thead>
<tbody>
<tr>
<td>
<div class="row">
<div class="col-lg-6">Item 1.0</div>
<div class="col-lg-6">Item 1.1</div>
</div>
</td>
<td>
<div class="row">
<div class="col-lg-6">Item 2.0</div>
<div class="col-lg-6">Item 2.1</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
This code creates a table where all items are in the same line. I have searched the css file but there is nowhere defined inline or inline-block, so I guess this is normal bootstrap behavior. What I am trying to achieve is to show items with prefix 1 one after another and same for items with prefix 2, but I want them all in same row. I have tried using <ul> with <li> elements, but they are also showed in the same line for some reason.
My table should contain only two columns and one header above them all. This is what I get now:
Issue is due to column classes - col-lg-6 which makes divs use equal width of parent td, use class col-lg-12 to use complete td width, please check the css of these classes below
.col-lg-12 {
width: 100%;
}
.col-lg-12 {
width: 50%;
}
Run below code
favorite
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table">
<thead>
Head
</thead>
<tbody>
<tr>
<td>
<div class="row">
<div class="col-lg-12">Item 1.0</div>
<div class="col-lg-12">Item 1.1</div>
</div>
</td>
<td>
<div class="row">
<div class="col-lg-12">Item 2.0</div>
<div class="col-lg-12">Item 2.1</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
codepen for reference - https://codepen.io/nagasai/pen/xybpMm
I don't understand yet why you need to use bootstrap grid system inside the table when the td's are designed to work like that. You're also using col-lg-6 which is equivalent to 2 td's inside 1 tr since there is no collapse (lg).
You'll have a similar output if you use this code;
<h6>Default:</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th colspan='2'>
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Item 1.0
</td>
<td>
Item 1.1
</td>
</tr>
<tr>
<td>
Item 2.0
</td>
<td>
Item 2.1
</td>
</tr>
</tbody>
</table>
</div>
<br>
<h6>Two Columns Only:</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th colspan='4'>
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Item 1.0
</td>
<td>
Item 1.1
</td>
<td>
Item 2.0
</td>
<td>
Item 2.1
</td>
</tr>
</tbody>
</table>
</div>
I am trying to duplicate the UI here: http://www.google.com/design/spec/components/data-tables.html#data-tables-tables-within-cards
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="mdl-card mdl-shadow--4dp" style="width:100%">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Header</h2>
</div>
<div class="mdl-card__supporting-text">
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
How do I get card container's width to wrap around the table?
When the screen is small and the table is too long, how do I get the table to scroll within the card? Or even get the card to scroll in the page?
I am also unsure how to get this configuration to work:
------------------
| 8 | 4 |
------------------
With a table within a card inside the 8 and the 4 grid. However I think if I can get it to stretch over a 12 grid it will work for 8/4.
Why is centre alignment not working on ?
I was expecting the text to be centre aligned when i specify the class "center aligned" to my element but it does not.
However, if I specify the same class on all elements then it works.
Shouldn't it suffice when a class is specified at and all childrens inherit?
A fiddle is at http://jsfiddle.net/4woemsjt/4/
Basically this one does not work.
<div class="ui grid centered">
<div class="fourteen wide column">
<table class="ui celled collapsing table">
<thead>
<tr class="center aligned">
<th class="three wide">S1</th>
<th class="three wide">S2</th>
<th class="two wide">S3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
But this one does
<div class="ui grid centered">
<div class="fourteen wide column">
<table class="ui celled collapsing table">
<thead>
<tr>
<th class="center aligned three wide">S1</th>
<th class="center aligned three wide">S2</th>
<th class="center aligned two wide">S3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
you need to add the "center aligned" to all th-elements.
".ui.table thead th" has "text-align:left" set as default in the .css file.
I have the code below where I'm trying to size a text input element using bootstrap's classes. However, I cannot get the thing to size down. I want it to be smaller on desktop, instead of taking up a massive amount of room.
<div class="container White_BG">
<div class="row" style="margin-left:0;margin-right:0;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Quickly place your order with this form.</h1>
<h2>Please enter the item numbers that you wish to order; once you add to the cart, then you will be able to change the quantity of those items ordered.</h2>
<div class="table-responsive">
<form method="post" name="QuickOrderMulti">
<table class="table table-bordered table-condensed table-hover">
<tr>
<th>Item #</th>
<th>Quantity</th>
<th>Description</th>
<th>Price</th>
<th>Subtotal</th>
</tr>
<tr>
<td>
<div class="col-lg-2">
<input type="text">
</div>
</td>
<td>
<input type="text">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
The offending line is:
<td>
<div class="col-lg-2">
<input type="text">
</div>
</td>
I tried using the col-lg-2 to make it only take up 2 grid columns, so maybe it'd be smaller. But no such luck.
Rather than surrounding it in a div, try making the input with the chosen class.
e.g.
<input class="col-lg-2" type="text">
I have a variation on a common question, and I'll try to explain it as best I can. It may take some visualization on your part. I have an HTML table (in reality there are tables within tables within divs within tables -- I'm using the JSGantt plugin). I'd like for the table header to be frozen only when I scroll down on the y-axis, but if I need to scroll right to see more data, I would like it to scroll right.
Meanwhile, as I scroll down (with the header row staying put), I'd like the first column of the table to scroll down with me. But when I scroll right, I want the first column to stay put (but as I mentioned above, the header row to scroll with me). So essentially I've frozen the first column only on the x-axis and the header row only on the y-axis.
I'll stop there for now. If anyone needs more clarification I can try to explain. I've tried this multiple ways, but I'm convinced that it may not be possible without some serious Javascript. The table, by the way, is contained within an outer div with set dimensions, hence the need for me to scroll the data.
Any help you can provide would be greatly appreciated.
This type of layout will help you on your way. Note there will be alot of formatting for the size of the cells to get them to match up
<div id="TableHeaderDiv">
<table id="TableHeader">
<thead>
<tr>
<th style="width:100px"> Column1 </th>
<th style="width:100px"> Column2 </th>
<th style="width:100px"> Column3 </th>
</tr>
<thead>
</table>
</div>
<div id "TableBodyMainDiv" style="overflow-y:auto">
<div id="TableBodyLeftDiv" style="float:left">
<table id="TableBody">
<tbody>
<tr>
<td style="width:100px"> Column2Value </td>
<td style="width:100px"> Column3Value </td>
</tr>
<!-- More rows here -->
<tbody>
</table>
</div>
<div id="TableBodyDiv" style="float:left; overflow-x: auto">
<table id="TableBody">
<tbody>
<tr>
<td style="width:100px"> Column2Value </td>
<td style="width:100px"> Column3Value </td>
</tr>
<!-- More rows here -->
<tbody>
</table>
</div>
</div>
probably would want to style the width's of the tds using CSS classes or Javascript