its very weird that i have padding in my td but it was 0 padding at all in my inspect element i see padding when i hover in my td? any idea of this?
its very weird lol.
here's my html
table.md-table border="1"
tr.md-table-content-row ng-repeat="(payroll_type, taxes) in ctrl.table_taxes | groupBy:'payroll_type'"
td.md-table-content.tax_table
div.pay-type layout="row" layout-align="center center" style="height:20px;"
| {{ payroll_type | capitalize }}
md-button.md-mini.md-primary.md-icon-button.md-mr-0.md-pd-0 ng-show="taxtableform.$visible" ng-click="ctrl.addTaxStatus(taxes)"
md-icon.material-icons.md-fnt-sz-20 add_circle_outline
md-tooltip Add Tax Status
hr
div.md-ta-c style="height:20px;"
| Exemption
hr
div.md-ta-c style="height:20px;"
| Status
hr
span ng-repeat="(status_name, taxes4) in taxes | groupBy:'payroll_type'"
div.md-ta-c ng-repeat="tax in taxes4 | unique:'status_name'| orderBy: 'status_name'" style="height:20px;"
hr
| {{ tax.status_name }}
td.md-table-content.tax_table.md-ta-r ng-repeat="(column_no, taxes2) in taxes | groupBy:'column_no'"
div.md-ta-c.md-mr-t-1 layout="row" layout-align="center center" style="height:20px;"
span
| {{ column_no }}
md-button.md-mini.md-primary.md-icon-button.md-mr-0.md-pd-0 ng-show="taxtableform.$visible" ng-click="ctrl.removeColumn(taxes2)"
md-icon.material-icons.md-fnt-sz-20 delete
md-tooltip Delete Column
hr
span ng-repeat="(exemption, taxes3) in taxes2 | groupBy:'exemption'"
div.item-wrapper style="height:20px;"
span ng-hide="taxtableform.$visible" e-style="width:50px;" editable-text="exemption" e-form="taxtableform" onbeforesave="ctrl.exemptionChecker($data, exemption, taxes2)"
| {{ exemption | number: 2 }}
hr
span ng-repeat="(over_percentage, taxes3) in taxes2 | groupBy:'over_percentage'"
div.item-wrapper style="height:20px;"
span ng-hide="taxtableform.$visible" e-style="width:50px;" editable-text="over_percentage" e-form="taxtableform" onbeforesave="ctrl.percentageChecker($data, over_percentage, taxes3)"
| {{ over_percentage | number: 2 }}
hr
span ng-repeat="tax in taxes2 | orderBy:'status_name'"
hr
div.item-wrapper style="height:20px;"
span ng-hide="taxtableform.$visible" e-style="width:50px;" editable-text="tax.amount" e-form="taxtableform" onbeforesave="ctrl.taxAmountChecker($data, tax)"
| {{ tax.amount }}
can u try to add this style at table
border-collapse: collapse;
Related
For instance name = Florian Müllner, want name to be Florian MUllner
How to covert name with accented characters in Liquid?
Read the replace doc, but was not able to figure out. How to use?
This is my very very dirty solution and far from complete (but works for my needs) with no plugins in Jekyll:
{% assign text = 'Müller Pérez' %}
{% include normalize_text.html %}
and the included file works as a function:
{% assign text = text | replace: 'á', 'a' | replace: 'é', 'e' | replace: 'í', 'i' | replace: 'ó', 'o' | replace: 'ú', 'u' %}
{% assign text = text | replace: 'à', 'a' | replace: 'è, 'e' | replace: 'ì', 'i' | replace: 'ò', 'o' | replace: 'ù', 'u' %}
{% assign text = text | replace: 'ä', 'a' | replace: 'ë', 'e' | replace: 'ï', 'i' | replace: 'ö', 'o' | replace: 'ü', 'u' %}
{% assign text = text | replace: 'â', 'a' | replace: 'ê, 'e' | replace: 'î', 'i' | replace: 'ô', 'o' | replace: 'û', 'u' %}
You can use replace like this.
{% assign text = 'Florian Müllner' | replace: "ü", "U" %}
I have this small (maybe simple) question. I have a table right now which is displayed as a normal table.
-------------------
| item 1 | item 4 |
-------------------
| item 2 | item 5 |
-------------------
| item 3 | item 6 |
-------------------
This works fine for most pages (layout wise) but I've got this same table on an other page where the layout of this table doesnt fit the div it's in. So I was thinking can I align the table data next to each other, using CSS:
-------------------------------------------------------
| item 1 | item 2 | item 3 | item 4 | item 5 | item 6 |
-------------------------------------------------------
I've tried a couple of things I found using google.
display:inline-block;,display:inline-table;,float:left. Now IS this at all possible? I know you can do it the other way round, using display:block.
Here is my HTML:
<table>
<tr>
<td><i class='fa fa-users' aria-hidden='true'></i></td>
<td><p>". chop($str,"-999") . "</p></td>
</tr>
<tr>
<td><i class='fa fa-clock-o' aria-hidden='true'></i></td>
<td><p>" . $row["Tijdsduur"] . "</p></td>
</tr>
<tr>
<td><i class='fa fa-euro' aria-hidden='true'></i></td>
<td><p><small>" . $var . "</small></p></td>
</tr>
</table>
I've tried a couple of things I found using google. display:inline-block;
And that will do it.
td { border: solid black 1px; }
tr, td { display: inline-block; }
<table>
<tr>
<td><i class='fa fa-users' aria-hidden='true'></i></td>
<td>
<p>". chop($str,"-999") . "</p>
</td>
</tr>
<tr>
<td><i class='fa fa-clock-o' aria-hidden='true'></i></td>
<td>
<p>" . $row["Tijdsduur"] . "</p>
</td>
</tr>
<tr>
<td><i class='fa fa-euro' aria-hidden='true'></i></td>
<td>
<p><small>" . $var . "</small></p>
</td>
</tr>
</table>
I have a html table received from this query:
SELECT proj_title, CONCAT(projectNo, " ", proj_title) AS title
FROM (
SELECT projectNo, CONCAT("Project ", title) AS proj_title, 0 AS a FROM project p1
UNION ALL
SELECT DISTINCT projectNo, process, 1 AS a FROM process p2
) t
ORDER BY projectNo, a, title
And table:
<table class="paginated" style=" margin-right:10%;">
<?php
$header ='<th>Title</th>';
echo "<thead>$header</thead>";
while ($data = mysqli_fetch_assoc($query))
{
$projectNo = $data['proj_title'];
$body = '<td>'.$projectNo.'</td>';
echo "<tbody>$body</tbody>";
}
?>
</table>
The table looks like this:
| title |
+-----------------+
| Project test |
| ANM |
| BLD |
| Project test2 |
| ANM KEY |
| BLD |
Is there any way to style only certain rows like: | Project test || Project test2 |
How it can be done?
Yes, you certainly can style individual rows in a table with CSS. Your provided structure doesn't actually include any table rows (<tr> elements), so you might want to fix that up first. <tbody> is not a valid child of <td>, and <td> must be contained inside a <tr>.
Once you fix up your table structure, you can target every nth row with the pseudo-selector :nth-of-type:
tr:nth-of-type(3n) {
color: #f00;
}
<table>
<tr>
<td>One</td>
</tr>
<tr>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
</tr>
<tr>
<td>Six</td>
</tr>
</table>
In the above sample, 3n represents that it should target every third row, and change the colour.
You could also alternatively add a class to the specific rows that you wish to target through PHP itself, and then simply target that class directly with CSS:
echo "<tr class='red'><td>$data</td></tr>";
.red {
color: #ff0;
}
Hope this helps! :)
I am using a Jekyll collection to manage elements of a lesson. Each element has a duration in its YAML front matter:
---
duration: 5
---
I loop over the elements to figure out the start time for each element:
{% assign current = 0 %}
<table>
{% for element in site.elements %}
<tr>
<td>{{ forloop.index }}</td>
<td>{{ element.title }}</td>
<td>{{ current | divided_by: 60 }}:{{ current | modulo: 60 }}</td>
</tr>
{% assign current = current | plus: element.duration %}
{% endfor %}
</table>
This gives the right output, but is poorly formatted: in particular, some times are shown like this:
9:5
instead of:
09:05
I can't think of a way to use date formatting to get the output I want, since the "times" are just minutes, not dates. Is there a way to format numbers in Jekyll with a specified number of decimal places and leading zeroes?
You can use conditional formating:
{% assign h = timeInMinutes | divided_by: 60 %}
{% if h <= 10 %}{% assign h = h | prepend: '0' %}{% endif %}
{% assign m = timeInMinutes | modulo: 60 %}
{% if m <= 10 %}{% assign m = m | prepend: '0' %}{% endif %}
{{ h }}:{{ m }}
Or a string trick :
{{ timeInMinutes | divided_by: 60 | plus: 100 | slice: 1, 2 }}
:
{{ timeInMinutes | modulo: 60 | plus: 100 | slice: 1, 2 }}
i want to display image when hideDiploma field is not 1. i will try for that but not working
the code as follow:
{{
#if:{{{hideDiploma|}}}|<div class="image" style="display:none;">|<div class="image">
}}
when hideDiploma field is not 1
Note that you are only checking if the parameter was actually set to anything. If you want to check for equality with 1, you could do it like this:
{{ #ifeq: {{{hideDiploma|}}} | 1
| <div class="image" style="display:none;">
| <div class="image">
}}
Or if you want to allow multiple values, e.g. yes and y, you could use a switch:
{{ #switch: {{{hideDiploma|}}}
| 1 | yes | y = <div class="image" style="display:none;">
| #default = <div class="image">
}}