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>
Related
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
I am creating one leave template,In which I am using bootstrap for responsiveness.But Its occupying more space between label and colon
Here is my code.how can I reduce the space between label and colonhttps://jsfiddle.net/zewykeLm/I want like this,If there any other good way please suggest me
Try this. Using table and ::before selector.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table tbody tr td:nth-child(2)::before {
content: " :";
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Employee name</td>
<td>bnhvg</td>
</tr>
<tr>
<td>Requested Leave from</td>
<td>bnhvg</td>
</tr>
<tr>
<td>Requested Leave from</td>
<td>bnhvg</td>
</tr>
<tr>
<td>Total Time requested</td>
<td>bnhvg</td>
</tr>
<tr>
<td>Leave Type</td>
<td>bnhvg</td>
</tr>
</tbody>
</table>
</body>
</html>
Correct your code errors by replacing this
<div class="container">
<section class="col-lg-10 col-md-10 col-sm-10 col-xs-10" style="margin-top:4%;">
<div style="text-align: right;"><label>Date:</label> <span>#sentDate#</span></div>
<table>
<tbody>
<tr>
<td><label>Employee name</label></td>
<td>#empName#</td>
</tr>
<tr>
<td><label>Employee Id</label></td>
<td>#empId#</td>
</tr>
<tr>
<td><label>Requested Leave from</label></td>
<td>#levFrom#</td>
</tr>
<tr>
<td><label>Requested Leave To</label></td>
<td>#levTo#</td>
</tr>
<tr>
<td><label>Total Time requested</label></td>
<td>#totalTime#</td>
</tr>
<tr>
<td><label>Leave Type</label></td>
<td>#levType#</td>
</tr>
</tbody>
</table>
<div><label>Special notes:</label></div>
<div style="margin: 20px 0 20px 0;">
#I have given propernotice to all pertinent parties that I will be out of the office for the period of time listed above and have made arrangements for coverage of all my office responsibilites.#
</div>
<div style="text-align: left;"><label> Regards</label></div>
<table>
<tbody>
<tr>
<td><label>Name</label></td>
<td>#name#</td>
</tr>
<tr>
<td><label>Mobile Number</label></td>
<td>#mobNum#</td>
</tr>
</tbody>
</table>
</section>
</div>
I have a responsive-table within a td with a colspan. Instead of the responsive-table limiting the width and creating a scroll bar for the inner table, it stretches the table to be too large for the screen. Is there any css that can be added to make this work other than setting an explicit width on the responsive-table div?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div style="width: 50px">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td colspan="2">
<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
<td>Test4</td>
<td>Test5</td>
<td>Test6</td>
<td>Test7</td>
<td>Test8</td>
<td>Test9</td>
<td>Test10</td>
<td>Test11</td>
<td>Test12</td>
<td>Test13</td>
<td>Test14</td>
<td>Test15</td>
<td>Test16</td>
<td>Test17</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I am expecting it to look like this, without needing to set an explicit width on the div inside the td.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div style="width: 50px">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td colspan="2">
<div class="table-responsive" style="width: 50px">
<table class="table table-bordered">
<tbody>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
<td>Test4</td>
<td>Test5</td>
<td>Test6</td>
<td>Test7</td>
<td>Test8</td>
<td>Test9</td>
<td>Test10</td>
<td>Test11</td>
<td>Test12</td>
<td>Test13</td>
<td>Test14</td>
<td>Test15</td>
<td>Test16</td>
<td>Test17</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Try this. Im not sure if you need it to be 50px wide if so just change style="width: 100%" to style="width: 50px%".
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive" style="width: 100%">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<th scope="row">1</th>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
<td>Test4</td>
<td>Test5</td>
<td>Test6</td>
<td>Test7</td>
<td>Test8</td>
<td>Test9</td>
<td>Test10</td>
<td>Test11</td>
<td>Test12</td>
<td>Test13</td>
<td>Test14</td>
<td>Test15</td>
<td>Test16</td>
<td>Test17</td>
</tr>
</tbody>
</table>
</div>
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>.
I've a html where i want a particular cell to be aligned to left. below is the code and fiddle link.
HTML:
<section class="tr_chapter">
<div class="chapter"><a name="HKWBV1_ORD_89"></a>
<div class="toc">
<div class="toc-part">
<table class="toc-div">
<tbody>
<tr>
<td>
<table class="toc-item-third-level">
<tbody>
<tr>
<td></td>
<td class="toc-item-num-left"><span class="font-style-bold">Contents</span></td>
<td class="toc-title"></td>
<td class="toc-pg"><span class="font-style-italic">para.</span></td>
</tr>
<tr>
<td>4/0/1</td> <td class="toc-item-num-left">1.</td>
<td class="toc-title">Companies (O.4, r.2)</td>
<td class="toc-pg">4/2</td>
</tr>
<tr>
<td></td>
<td class="toc-item-num-left">2.</td>
<td class="toc-title">Consolidation, etc., of causes or matters (O.4, r.9)</td>
<td class="toc-pg">4/9</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
I want the output as given in the below image. i.e. the number (4/0/1). please let me know how can i do it.
Fiddle
Thanks
If you want the cell with the number 4/0/1 aligned left simply give align="left" to the parent td or add to it a class with text-align:left;
See: jsfiddle