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>
Related
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>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I just finished the html portion of my table and need help with the css portion of it. The table can be found on this page: https://www.shiftins.com/test-page-1/.
My issue is with the alignment. I can't seem to figure out how to get
the div "tbl-header" to align with div "tbl-content".
Also, I would like to know how to reduce the white space in between the county/city column and the start of the data set by slightly increasing the cell width into this space. How would I go about doing that for both sections of the table to keep everything aligned properly?
The biggest problem I see is that your top row is in a different table than the rest of your data. You either need to specifically assign widths to each column, or put everything in the same table like this:
jsFiddle
<table class="sortable" cellpadding="0" cellspacing="0" border="0" style="width:80%;">
<tbody>
<tr>
<td style="text-align: left;"><strong>County / City</strong></td>
<td style="text-align: left;"><strong>200k</strong></td>
<td style="text-align: left;"><strong>300k</strong></td>
<td style="text-align: left;"><strong>400k</strong></td>
<td style="text-align: left;"><strong>500k</strong></td>
<td style="text-align: left;"><strong>750k</strong></td>
<td style="text-align: left;"><strong>Average</strong></td>
</tr>
<tr>
<td style="text-align: left;">ALAMEDA ALAMEDA</td>
<td style="text-align: left;">813.40</td>
<td style="text-align: left;">1144.72</td>
<td style="text-align: left;">1329.03</td>
<td style="text-align: left;">1636.41</td>
<td style="text-align: left;">2088.74</td>
<td style="text-align: left;">1402.46</td>
</tr>
<tr>
<td style="text-align: left;">ALAMEDA BERKELEY</td>
<td style="text-align: left;">920.11</td>
<td style="text-align: left;">1297.82</td>
<td style="text-align: left;">1519.37</td>
<td style="text-align: left;">1872.77</td>
<td style="text-align: left;">2363.37</td>
<td style="text-align: left;">1594.69</td>
</tr>
<tr>
<td style="text-align: left;">ALAMEDA FREMONT</td>
<td style="text-align: left;">735.92</td>
<td style="text-align: left;">1033.36</td>
<td style="text-align: left;">1203.48</td>
<td style="text-align: left;">1483.00</td>
<td style="text-align: left;">1871.16</td>
<td style="text-align: left;">1265.38</td>
</tr>
</tbody>
</table>
First of all, a recommendation to create tables, try to avoid put in headers in <div> tags and the data in other table, its better keep all the information in one table structure like this:
<table>
<tr>
<th>title1</th>
<th>title2</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>
a <th> tag is a table headings, <tr> table rows and <td> table data
That's why the size of your table don't fit, so after made this change you can add css style of your table and works with the size of the rows http://www.w3schools.com/css/css_table.asp
How to do an (X)HTML5 table:
<table>
<colgroup style="width: 10%;"></colgroup>
<colgroup style="width: 30%;"></colgroup>
<colgroup style="width: 20%;"></colgroup>
<colgroup style="width: 20%;"></colgroup>
<colgroup style="width: 20%;"></colgroup>
<thead>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
</thead>
<tfoot>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
</tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</tbody>
</table>
If you want the fixed header, you need to use 2 tables and assign fixed widths so that everything will line up.
jsFiddle
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table alignment</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="author" content="shawn">
<style>
.aligned td{
width:14% !important;
}
.aligned{
width:70%;
margin-left:auto;
margin-right:auto;
}
.header{
background:#0000ff;
color:#fff;
line-height:30px;
height:30px;
font-weight:bold;
width:70%;
left:15%;
top:0;
position:fixed;
}
.clr30{
clear:both;
height:30px;
}
</style>
</head>
<body>
<table class="aligned header">
<tbody>
<tr>
<td>County / City</td>
<td>200k</td>
<td>300k</td>
<td>400k</td>
<td>500k</td>
<td>750k</td>
<td>Average</td>
</tr>
</tbody>
</table>
<div class="clr30"></div>
<table class="aligned">
<tbody>
<tr>
<td>ALAMEDA ALAMEDA</td>
<td>813.40</td>
<td>1144.72</td>
<td>1329.03</td>
<td>1636.41</td>
<td>2088.74</td>
<td>1402.46</td>
</tr>
<tr>
<td>ALAMEDA BERKELEY</td>
<td>920.11</td>
<td>1297.82</td>
<td>1519.37</td>
<td>1872.77</td>
<td>2363.37</td>
<td>1594.69</td>
</tr>
<tr>
<td>ALAMEDA FREMONT</td>
<td>735.92</td>
<td>1033.36</td>
<td>1203.48</td>
<td>1483.00</td>
<td>1871.16</td>
<td>1265.38</td>
</tr>
<tr>
<td>ALAMEDA HAYWARD</td>
<td>779.26</td>
<td>1091.57</td>
<td>1269.92</td>
<td>1565.50</td>
<td>1993.72</td>
<td>1339.99</td>
</tr>
<tr>
<td>ALAMEDA LIVERMORE</td>
<td>689.70</td>
<td>973.33</td>
<td>1140.16</td>
<td>1410.07</td>
<td>1762.98</td>
<td>1195.25</td>
</tr>
</tbody>
</table>
</html>
</body>
I would like to get the header of my table fixed, so it could be always visible while scrolling down. The height of my table would be fixed to 500 px.
Here is a plunkr:
enter link description here
<table class="table table-striped table-bordered">
<thead>
<tr>
<th style="text-align:center">Produit</th>
<th style="text-align:center">Emballage</th>
<th style="text-align:center">Certificat Fourn.</th>
<th style="text-align:center">Marque</th>
<th style="text-align:center">Catégorie</th>
<th style="text-align:center">Calibre</th>
<th style="text-align:center" colspan="3">20/03</th>
<th style="text-align:center" colspan="3">21/03</th>
<th style="text-align:center" colspan="3">22/03</th>
<th style="text-align:center" colspan="3">23/03</th>
</tr>
<tr>
<th colspan="6"></th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="planning in data">
<td style="text-align:center">
{{planning.produit}}
</td>
<td style="text-align:center">
{{planning.emballage}}
</td>
<td style="text-align:center">
{{planning.certificatFournisseur}}
</td>
...
<td style="text-align:center">
{{planning.dispJ4}}
</td>
</tr>
</tbody>
</table>
I have looked over the net, but I didn"t find any nice solution.
Thanks for you help.
You have to split your table to one with headers and a second one with data. Then add javascript that on scroll (detect if the position of your header table are near the 0 of screen and if yes then add css style for your header table -> position:fixed top:0px ;
you will also have a reverse javascript for removing position: fixed when viewer scroll up.
EDIT
If you dont care to lose table from page you can juse use 2 tables (header and content) put content's table's height = 500px - header's table's height and for content's table css overflow:scroll
I have found a solution that works pretty well on one of my tables.
I have tried to apply it to another table but I am getting differences between td width and th width. I don't know why, even if I set the same width to each one of them.
If anyone can explain to me the reason why...
Thanks!
Plunkr :
http://plnkr.co/edit/kDxIYzmO6onqqZcZIURc?p=preview
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div>
<table class="table table-bordered table-hover" style="font-size:11px;table-layout: fixed; margin-bottom:0px">
<thead>
<tr>
<th style="text-align:center;width:168px">Fournisseur</th>
<th style="text-align:center;width:148px">Désignation</th>
<th style="text-align:center;width:81px">Date</th>
<th style="text-align:center;width:53px">Colis</th>
<th style="text-align:center;width:53px">Brut</th>
<th style="text-align:center;width:53px">Tare</th>
<th style="text-align:center;width:78px">Poids net</th>
<th style="text-align:center;width:58px">Pièces</th>
<th style="text-align:center;width:68px">Palette</th>
<th style="text-align:center;width:53px">Valo</th>
<th style="text-align:center;width:98px">Prix unit ht</th>
<th style="text-align:center;width:58px">H.T.</th>
<th style="text-align:center;width:58px">Tva</th>
</tr>
</thead>
</table>
<div class="wrap_scrollable">
<div class="scrollable">
<table class="table table-bordered" style="font-size:11px;table-layout: fixed">
<tbody>
<!-- ngRepeat: frais in listeFrais -->
<tr >
<td style="text-align:center;width:168px;word-wrap: break-word" class="ng-binding">ALIMEA</td>
<td style="text-align:center;width:148px;word-wrap: break-word" class="ng-binding">Triage</td>
<td style="text-align:center;width:81px;word-wrap: break-word" class="ng-binding">2015-04-01</td>
...
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">-50</td>
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">0</td>
</tr>
<!-- end ngRepeat: frais in listeFrais -->
<tr>
<td style="text-align:center;width:168px;word-wrap: break-word" class="ng-binding">ALBA BIO COOP</td>
<td style="text-align:center;width:148px;word-wrap: break-word" class="ng-binding">Triage</td>
<td style="text-align:center;width:81px;word-wrap: break-word" class="ng-binding">2015-04-01</td>
...
<td style="text-align:center;width:98px;word-wrap: break-word" class="ng-binding">2</td>
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">-20</td>
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">0</td>
</tr>
<!-- end ngRepeat: frais in listeFrais -->
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
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