Bootstrap 4 Alpha Grid unable 2 tables on side by side - css

As using Bootstrap 4, I'm aware the .col-xs are dropped, instead of .col, I have tested on bootstrap 3.5 which I'm using
<div class="col-xs-4">
Table left side goes here
</div>
<div class="col-xs-8">
Table right side goes here
</div>
And it works fine, as you can see it from here.
however, it's a bit different on Bootstrap 4 Alpha.
<div class="col-2">
<h2 class="sub-header">Test Arear</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">Test</td>
</tr>
<tr>
<td class="col-md-1">Test 2</td>
</tr>
<tr>
<td class="col-md-1">Test 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-10">
<h2 class="sub-header">Ticket Number</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,002</td>
<td class="col-md-3">1,003</td>
</tr>
<tr>
<td class="col-md-1">1,004</td>
<td class="col-md-2">1,005</td>
<td class="col-md-3">1,006</td>
</tr>
<tr>
<td class="col-md-1">1,002</td>
<td class="col-md-2">1,021</td>
<td class="col-md-3">1,023</td>
</tr>
</tbody>
</table>
</div>
</div>
As you can see results from here.
I want it on the side by side table but it's not side by side. Am I missing something?

You need a row wrapper as bootstrap four is done on flex rather than floats so the columns now need to be wrapped to make them into columns
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet"/>
<div class="row">
<div class="col-2">
<h2 class="sub-header">Test Arear</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">Test</td>
</tr>
<tr>
<td class="col-md-1">Test 2</td>
</tr>
<tr>
<td class="col-md-1">Test 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-10">
<h2 class="sub-header">Ticket Number</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,002</td>
<td class="col-md-3">1,003</td>
</tr>
<tr>
<td class="col-md-1">1,004</td>
<td class="col-md-2">1,005</td>
<td class="col-md-3">1,006</td>
</tr>
<tr>
<td class="col-md-1">1,002</td>
<td class="col-md-2">1,021</td>
<td class="col-md-3">1,023</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Example Bootply

Related

bootstrap- table cannot align to the right

I am trying to align my table to the right of my invoice page like this:
I place these two tables in the same row and into two columns but however, it's not working as intended. I want the 2nd table to be on the highlighted blue section of the page.
Below is my code:
<div class="row">
<div class="col-4 col-md-4 col-sm-5 " >
<table class="table table-bordered ">
<th><strong> Payment Received </strong></th>
<tbody>
<tr style="page-break-after: always;">
<td class="left">
Payment Method: xxxxxx
</td>
</tr>
<tr>
<td class="left">
Reference No: 2192012
</td>
</tr>
<tr>
<td class="left">
Amount Paid: RM10,000.00
</td>
</tr>
<tbody>
</table>
<div>
<div class="col-4 col-md-4 col-sm-5 mr-auto ">
<table class="table table-clear">
<tbody>
<tr>
<td class="left">
<strong>Subtotal</strong>
</td>
<td class="right">8.497,00</td>
</tr>
<tr>
<td class="left">
<strong>Transportation(Klang Valley)</strong>
</td>
<td class="right">1,699,40</td>
</tr>
<tr>
<td class="left">
<strong>Transportation(Outstation)</strong>
</td>
<td class="right">679,76</td>
</tr>
<tr>
<td class="left">
<strong> Grand Total</strong>
</td>
<td class="right">
<strong>7.477,36</strong>
</td>
</tr>
<tr>
<td class="left">
<strong> Discount</strong>
</td>
<td class="right">
20%
</td>
</tr>
<tr>
<td class="left">
<strong> Amount Paid</strong>
</td>
<td class="right">
7.477,36
</td>
</tr>
<tr>
<td class="left">
<strong> Balance Due</strong>
</td>
<td class="right">
<strong>7.477,36</strong>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I am not sure why it would not align to the right since they share the same row.
What did I do wrong?
Issues
<div> not closed properly
Use ml-auto instead of mr-auto
Working Demo
https://www.codeply.com/p/86T67T7NFV

Input group addon not aligning well on the mozilla browser

I have the following table:
<table class="neo-table">
<tr>
<td>Day of final discharge home</td>
<td>{{ form_widget(form.mHomeDischargeDay, {'id': 'M_Home_discharge_day', 'attr':{'style':'width:60px'}})}}</td>
<td><input type="button" value="enter date" onclick="convertDate('M_Home_discharge_day')"></td>
</tr>
<tr>
<td >Weight at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeWeight, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">g</div> </div></td>
</tr>
<tr>
<td >Head circumference at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeHeadCirc, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div> </div></td>
</tr>
<tr>
<td>Length at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeLength, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></td>
</tr>
<tr>
<td>Enteral feeding at final discharge</td>
<td>{{ form_widget(form.mHomeFeeding)}}</td>
<td></td>
</tr>
</table>
On the chrome browser, it works fine and displays this:
But on the mozilla browser, the group addon is not correctly aligned:
I tried adding this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
Like mentioned on this post:
Input group addon alignment
But I have not been able to figure out so far where I can fix this issue.
Edit:
Here is a simplified version of the problem:
<table style="width: 100%";>
<tr>
<td>row1 col1</td>
<td>row1 col2</td>
<td>row1 col3</td>
</tr>
<tr>
<td >row2 col1</td>
<td colspan="2"><div class="input-group">row2 col2<div class="input-group-addon">row2 col2</div> </div></td>
</tr>
</table>
With the code above, I get the following result on mozilla:
I would like "row2 col2" to be in the immediate right vicinity of "row2col2"
What is the way to do this?
I solved the problem by wrapping input group addons with divs as shown below:
It works fine for Chrome and Mozilla.
<table class="neo-table">
<tr>
<td>Day of final discharge home</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'>{{ form_widget(form.mHomeDischargeDay, {'id': 'M_Home_discharge_day', 'attr':{'style':'width:60px'}})}}</div>
</div>
</div>
</div>
</td>
<td><input type="button" value="enter date" onclick="convertDate('M_Home_discharge_day')"></td>
</tr>
<tr>
<td>Weight at final discharge</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeWeight, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">g</div></div></div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Head circumference at final discharge</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeHeadCirc, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Length at final discharge</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeLength, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Congenital malformation</td>
<td>{{ form_widget(form.mBdefect)}}</td>
<td colspan="3">{{ form_widget(form.mBdefectSpecific, {'attr':{'style':'width:250px'}})}}</td>
</tr>
<tr>
<td>Enteral feeding at final discharge</td>
<td>{{ form_widget(form.mHomeFeeding)}}</td>
<td></td>
</tr>
</table>

Make two table beside each other

I want my table Semester Attended to be in the left of the Grade table. How can i achieve this? Im new to html and css. Can someone give me clues to achieve this?
here's my code.
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Semester Attended</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<aside></aside>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<div id="gradetable">
</div>
</div>
Since you are using bootstrap - just use the grid system.
Create new row, add to columns (.col-X-6), and inside each column's-cell put one table.
Something like that:
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Semester Attended</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<aside></aside>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="table-responsive">
<div id="gradetable">
</div>
</div>
</div>
</div>
You can wrap both tables for each column, same row in another table.
E.g.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<thead>
<tr>
<th>Semester Attended Table</th>
<th>Grade Table</th>
</tr>
</thead>
<tbody>
<td>
<table id="semesterAttendedTable" class="table table-bordered">
<thead>
<tr>
<td>Semester 1</td>
<td>Semester 2</td>
<td>Semester 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1,1</td>
<td>Row 1,2</td>
<td>Row 1,3</td>
</tr>
<tr>
<td>Row 2,1</td>
<td>Row 2,2</td>
<td>Row 2,3</td>
</tr>
</tbody>
</table>
</td>
<td>
<table id="gradeTable" class="table table-bordered">
<thead>
<tr>
<td>Grade 1</td>
<td>Grade 2</td>
<td>Grade 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1,1</td>
<td>Row 1,2</td>
<td>Row 1,3</td>
</tr>
<tr>
<td>Row 2,1</td>
<td>Row 2,2</td>
<td>Row 2,3</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table
You just need to add float:left to the div with the first table.
div.semester {
float:left;
}
<div class="table-responsive semester">
<table class="table table-bordered">
<thead>
<tr>
<th>Semester Attended</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<aside></aside>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive" id="gradetable">
<table class="table table-bordered">
<thead>
<tr>
<th>Grades</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<aside></aside>
</td>
</tr>
</tbody>
</table>
</div>

table logic with responsive values bootstrap / html

I don't think I understand Bootstrap logic quiet well. With code listed down, I defined table-responsive class with 12 units. For each cell within table i then used defined the size.
So basic idea is to get this:
0
1 2 3
However bootstrap returns me this:
_0_
_1_2 3
For the value 1 it takes the parameters of cell with value 0. Why is that, eventhose i defined cell nr.1 can have only one unit size. Please let me know. Thank you.
<div class="table-responsive col-xs-12">
<table class="table">
<tbody>
<tr>
<td class="col-xs-3" style="text-align:center;">0</td>
</tr>
<tr>
<td class="col-xs-1" style="text-align:center;">1</td>
<td class="col-xs-1" style="text-align:center;">2</td>
<td class="col-xs-1" style="text-align:center;">3</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive col-xs-12">
<table class="table">
<tbody>
<tr>
<td class="col-xs-3" colspan="3" style="text-align:center;">0</td>
</tr>
<tr>
<td class="col-xs-1" style="text-align:center;">1</td>
<td class="col-xs-1" style="text-align:center;">2</td>
<td class="col-xs-1" style="text-align:center;">3</td>
</tr>
</tbody>
</table>
</div>
you need to alter your first row like this. You are getting this error because the column structure for each row would be same.
<tr>
<td></td>
<td class="col-xs-1" style="text-align:center;">0</td>
</tr>
Here is a pen and below is a working example:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive col-xs-12">
<table class="table">
<tbody>
<tr>
<td></td>
<td class="col-xs-1 col-offset-3" style="text-align:center;">0</td>
</tr>
<tr>
<td class="col-xs-1" style="text-align:center;">1</td>
<td class="col-xs-1" style="text-align:center;">2</td>
<td class="col-xs-1" style="text-align:center;">3</td>
</tr>
</tbody>
</table>
</div>
There is a simple way to do this, i have copied your code and add display:inline-block to td element try with the snippet
table tr {
text-align:center;
}
table tr td {
display:inline-block !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive col-xs-12">
<table class="table">
<tbody>
<tr>
<td class="col-xs-1" style="text-align:center;">0</td>
</tr>
<tr>
<td class="col-xs-1" style="text-align:center;">1</td>
<td class="col-xs-1" style="text-align:center;">2</td>
<td class="col-xs-1" style="text-align:center;">3</td>
</tr>
</tbody>
</table>
</div>

How can I make a data table work properly using Zurb Ink

I am using Ink to try and create an order confirmation e-mail from an ecommerce store. If I have a table that shows item info or any sort of data I layout, the last column is crunched to one character width when resizing to small. Example code in a 6-column cell is attached for code as well as the output screenshot.
Any ideas how I can fix this?
<table class="six columns">
<tr>
<td>
<table width="100%">
<tr>
<td>Subtotal</td>
<td>$60.00</td>
</tr>
<tr>
<td>Shipping & Handling</td>
<td>$11.91</td>
</tr>
<tr>
<td><strong>Grand Total</strong></td>
<td><strong>$71.91</strong></td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
A Ink sub-grid would be useful here.
HTML
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<div class="c1">
<table class="row">
<tr>
<td class="wrapper">
<table class="twelve columns">
<tr>
<td class="ten sub-columns">Subtotal</td>
<td class="two sub-columns last">$10</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper">
<table class="twelve columns">
<tr>
<td class="ten sub-columns">S&H</td>
<td class="two sub-columns last">$2</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper">
<table class="twelve columns">
<tr>
<td class="ten sub-columns">Total</td>
<td class="two sub-columns last">$12</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Screenshot
Here's the demo.
I think Ink is only for creating responsive e-mail layouts. If you want something more, you can use standard HTML. So <table> with <tr>, <td> and <th>.

Resources