Move the content, not text, of a table's cell to the right - html-table

I have a series of nested tables, below I created a jsfiddle structure.
I was using the arab notation, ( direction: rtl ) which is obviously wrong. I can not find the right css that moves the content to the right.
I wish to recreate the same structure.
Without using direction: rtl; because this makes the text reversed too. Borders are only to highlight it better.
Thanks to anyone who can help me
https://jsfiddle.net/wo77wgL5/
<table width = "800px" border=3 class="centralTable">
<tr>
<th></th>
<th></th>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tbody>
<tr>
<td> </td>
<td> </td>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
<td>Text 4</td>
</tr>
<tr>
<td colspan=6 style= "direction:rtl;">
<table width = "500px" border=1 class="toTheRight">
<tr>
<th></th>
<th></th>
<th>header 11</th>
<th>header 22</th>
<th>header 33</th>
<th>header 44</th>
</tr>
<tbody>
<tr>
<td> </td>
<td> </td>
<td>Text 11</td>
<td>Text 22</td>
<td>Text 33</td>
<td>Text 44</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>


You can use <td align="right">
https://jsfiddle.net/msp5m4k9

Related

How do I render numbers like 4999 to $4,999.00 in datatables?

If the data source is from an existed DOM, rather than some JSON variable. How do I convert the numbers like 4999 to $4,999.00 in datatables?
I don't know what kind of options should be passed to the main function.
$('#example').DataTable(
{
// need help on this
}
);
Here is the code:
$(document).ready(function() {
//Only needed for the filename of export files.
//Normally set in the title tag of your page.
document.title='Simple DataTable';
// DataTable initialisation
$('#example').DataTable(
{
}
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<a class="btn btn-success" style="float:left;margin-right:20px;" href="https://codepenio/collection/XKgNLN/" target="_blank">Other examples on Codepen</a>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order</th>
<th>Description</th>
<th>Deadline</th>
<th>Status</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alphabet puzzle</td>
<td>2016/01/15</td>
<td>Done</td>
<td data-order="1000">1000</td>
</tr>
<tr>
<td>2</td>
<td>Layout for poster</td>
<td>2016/01/31</td>
<td>Planned</td>
<td data-order="1834">1834</td>
</tr>
<tr>
<td>3</td>
<td>Image creation</td>
<td>2016/01/23</td>
<td>To Do</td>
<td data-order="1500">1500</td>
</tr>
<tr>
<td>4</td>
<td>Create font</td>
<td>2016/02/26</td>
<td>Done</td>
<td data-order="1200">1200</td>
</tr>
<tr>
<td>5</td>
<td>Sticker production</td>
<td>2016/02/18</td>
<td>Planned</td>
<td data-order="2100">2100</td>
</tr>
<tr>
<td>6</td>
<td>Glossy poster</td>
<td>2016/03/17</td>
<td>To Do</td>
<td data-order="899">899</td>
</tr>
<tr>
<td>7</td>
<td>Beer label</td>
<td>2016/05/28</td>
<td>Confirmed</td>
<td data-order="2499">2499</td>
</tr>
<tr>
<td>8</td>
<td>Shop sign</td>
<td>2016/04/19</td>
<td>Offer</td>
<td data-order="1099">1099</td>
</tr>
<tr>
<td>9</td>
<td>X-Mas decoration</td>
<td>2016/10/31</td>
<td>Confirmed</td>
<td data-order="1750">1750</td>
</tr>
<tr>
<td>10</td>
<td>Halloween invite</td>
<td>2016/09/12</td>
<td>Planned</td>
<td data-order="400">400</td>
</tr>
<tr>
<td>11</td>
<td>Wedding announcement</td>
<td>2016/07/09</td>
<td>To Do</td>
<td data-order="299">299</td>
</tr>
<tr>
<td>12</td>
<td>Member pasport</td>
<td>2016/06/22</td>
<td>Offer</td>
<td data-order="149">149</td>
</tr>
<tr>
<td>13</td>
<td>Drink tickets</td>
<td>2016/11/01</td>
<td>Confirmed</td>
<td data-order="199">199</td>
</tr>
<tr>
<td>14</td>
<td>Album cover</td>
<td>2017/03/15</td>
<td>To Do</td>
<td data-order="4999">4999</td>
</tr>
<tr>
<td>15</td>
<td>Shipment box</td>
<td>2017/02/08</td>
<td>Offer</td>
<td data-order="1399">1399</td>
</tr>
<tr>
<td>16</td>
<td>Wooden puzzle</td>
<td>2017/01/11</td>
<td>Done</td>
<td data-order="1000">1000</td>
</tr>
<tr>
<td>17</td>
<td>Fashion Layout</td>
<td>2016/01/30</td>
<td>Planned</td>
<td data-order="1834">1834</td>
</tr>
<tr>
<td>18</td>
<td>Toy creation</td>
<td>2016/01/10</td>
<td>To Do</td>
<td data-order="1550">1550</td>
</tr>
<tr>
<td>19</td>
<td>Create stamps</td>
<td>2016/02/26</td>
<td>Done</td>
<td data-order="1220">1220</td>
</tr>
<tr>
<td>20</td>
<td>Sticker design</td>
<td>2017/02/18</td>
<td>Planned</td>
<td data-order="2100">2100</td>
</tr>
<tr>
<td>21</td>
<td>Poster rock concert</td>
<td>2017/04/17</td>
<td>To Do</td>
<td data-order="899">899</td>
</tr>
<tr>
<td>22</td>
<td>Wine label</td>
<td>2017/05/28</td>
<td>Confirmed</td>
<td data-order="2799">2799</td>
</tr>
<tr>
<td>23</td>
<td>Shopping bag</td>
<td>2017/04/19</td>
<td>Offer</td>
<td data-order="1299">1299</td>
</tr>
<tr>
<td>24</td>
<td>Decoration for Easter</td>
<td>2017/10/31</td>
<td>Confirmed</td>
<td data-order="1650">1650</td>
</tr>
<tr>
<td>25</td>
<td>Saint Nicolas colorbook</td>
<td>2017/09/12</td>
<td>Planned</td>
<td data-order="510">510</td>
</tr>
<tr>
<td>26</td>
<td>Wedding invites</td>
<td>2017/07/09</td>
<td>To Do</td>
<td data-order="399">399</td>
</tr>
<tr>
<td>27</td>
<td>Member pasport</td>
<td>2017/06/22</td>
<td>Offer</td>
<td data-order="249">249</td>
</tr>
<tr>
<td>28</td>
<td>Drink tickets</td>
<td>2017/11/01</td>
<td>Confirmed</td>
<td data-order="199">199</td>
</tr>
<tr>
<td>29</td>
<td>Blue-Ray cover</td>
<td>2018/03/15</td>
<td>To Do</td>
<td data-order="1999">1999</td>
</tr>
<tr>
<td>30</td>
<td>TV carton</td>
<td>2019/02/08</td>
<td>Offer</td>
<td data-order="1369">1369</td>
</tr>
</tbody>
</table>

You can use the createdCell() callback, inside DataTables' columnDefs initializazion option.
Inside the callback, you have access to the <td> element of the created cell and to its data, so you can manipulate both in the way that you prefer.
In this fiddle I changed the shown data format using the Intl.NumberFormat() api:
$(document).ready(function() {
// Only needed for the filename of export files.
// Normally set in the title tag of your page.
document.title = 'Simple DataTable';
// DataTable initialisation
$('#example').DataTable({
columnDefs: [{
targets: 4, // <-- this is the target column
createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
const formattedContent = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(cellData);
cell.innerHTML = formattedContent;
},
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<a class="btn btn-success" style="float:left;margin-right:20px;" href="https://codepenio/collection/XKgNLN/" target="_blank">Other examples on Codepen</a>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order</th>
<th>Description</th>
<th>Deadline</th>
<th>Status</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alphabet puzzle</td>
<td>2016/01/15</td>
<td>Done</td>
<td data-order="1000">1000</td>
</tr>
<tr>
<td>2</td>
<td>Layout for poster</td>
<td>2016/01/31</td>
<td>Planned</td>
<td data-order="1834">1834</td>
</tr>
<tr>
<td>3</td>
<td>Image creation</td>
<td>2016/01/23</td>
<td>To Do</td>
<td data-order="1500">1500</td>
</tr>
<tr>
<td>4</td>
<td>Create font</td>
<td>2016/02/26</td>
<td>Done</td>
<td data-order="1200">1200</td>
</tr>
<tr>
<td>5</td>
<td>Sticker production</td>
<td>2016/02/18</td>
<td>Planned</td>
<td data-order="2100">2100</td>
</tr>
<tr>
<td>6</td>
<td>Glossy poster</td>
<td>2016/03/17</td>
<td>To Do</td>
<td data-order="899">899</td>
</tr>
<tr>
<td>7</td>
<td>Beer label</td>
<td>2016/05/28</td>
<td>Confirmed</td>
<td data-order="2499">2499</td>
</tr>
<tr>
<td>8</td>
<td>Shop sign</td>
<td>2016/04/19</td>
<td>Offer</td>
<td data-order="1099">1099</td>
</tr>
<tr>
<td>9</td>
<td>X-Mas decoration</td>
<td>2016/10/31</td>
<td>Confirmed</td>
<td data-order="1750">1750</td>
</tr>
<tr>
<td>10</td>
<td>Halloween invite</td>
<td>2016/09/12</td>
<td>Planned</td>
<td data-order="400">400</td>
</tr>
<tr>
<td>11</td>
<td>Wedding announcement</td>
<td>2016/07/09</td>
<td>To Do</td>
<td data-order="299">299</td>
</tr>
<tr>
<td>12</td>
<td>Member pasport</td>
<td>2016/06/22</td>
<td>Offer</td>
<td data-order="149">149</td>
</tr>
<tr>
<td>13</td>
<td>Drink tickets</td>
<td>2016/11/01</td>
<td>Confirmed</td>
<td data-order="199">199</td>
</tr>
<tr>
<td>14</td>
<td>Album cover</td>
<td>2017/03/15</td>
<td>To Do</td>
<td data-order="4999">4999</td>
</tr>
<tr>
<td>15</td>
<td>Shipment box</td>
<td>2017/02/08</td>
<td>Offer</td>
<td data-order="1399">1399</td>
</tr>
<tr>
<td>16</td>
<td>Wooden puzzle</td>
<td>2017/01/11</td>
<td>Done</td>
<td data-order="1000">1000</td>
</tr>
<tr>
<td>17</td>
<td>Fashion Layout</td>
<td>2016/01/30</td>
<td>Planned</td>
<td data-order="1834">1834</td>
</tr>
<tr>
<td>18</td>
<td>Toy creation</td>
<td>2016/01/10</td>
<td>To Do</td>
<td data-order="1550">1550</td>
</tr>
<tr>
<td>19</td>
<td>Create stamps</td>
<td>2016/02/26</td>
<td>Done</td>
<td data-order="1220">1220</td>
</tr>
<tr>
<td>20</td>
<td>Sticker design</td>
<td>2017/02/18</td>
<td>Planned</td>
<td data-order="2100">2100</td>
</tr>
<tr>
<td>21</td>
<td>Poster rock concert</td>
<td>2017/04/17</td>
<td>To Do</td>
<td data-order="899">899</td>
</tr>
<tr>
<td>22</td>
<td>Wine label</td>
<td>2017/05/28</td>
<td>Confirmed</td>
<td data-order="2799">2799</td>
</tr>
<tr>
<td>23</td>
<td>Shopping bag</td>
<td>2017/04/19</td>
<td>Offer</td>
<td data-order="1299">1299</td>
</tr>
<tr>
<td>24</td>
<td>Decoration for Easter</td>
<td>2017/10/31</td>
<td>Confirmed</td>
<td data-order="1650">1650</td>
</tr>
<tr>
<td>25</td>
<td>Saint Nicolas colorbook</td>
<td>2017/09/12</td>
<td>Planned</td>
<td data-order="510">510</td>
</tr>
<tr>
<td>26</td>
<td>Wedding invites</td>
<td>2017/07/09</td>
<td>To Do</td>
<td data-order="399">399</td>
</tr>
<tr>
<td>27</td>
<td>Member pasport</td>
<td>2017/06/22</td>
<td>Offer</td>
<td data-order="249">249</td>
</tr>
<tr>
<td>28</td>
<td>Drink tickets</td>
<td>2017/11/01</td>
<td>Confirmed</td>
<td data-order="199">199</td>
</tr>
<tr>
<td>29</td>
<td>Blue-Ray cover</td>
<td>2018/03/15</td>
<td>To Do</td>
<td data-order="1999">1999</td>
</tr>
<tr>
<td>30</td>
<td>TV carton</td>
<td>2019/02/08</td>
<td>Offer</td>
<td data-order="1369">1369</td>
</tr>
</tbody>
</table>

rowSpan hides rows

<table>
<tr> <td rowspan="2">1</td> <td>2</td> </tr>
<tr> <td rowspan="2">3</td> </tr>
<tr> <td>4</td> </tr>
</table>
seemingly only displays two rows:
The reason for hiding the second row [1 3] is, that the cells with text 1 and 3 are reduced in height. Is there a way to ensure, that the second row is visible in the display (not only in DOM)?
The problem gets clearer, if you look at the same table with an additional column:
<table>
<tr> <td rowspan="2">1</td> <td>2</td> <td>0</td> </tr>
<tr> <td rowspan="2">3</td> <td>0</td> </tr>
<tr> <td>4</td> <td>0</td> </tr>
</table>
which is displayed like:

You can add a height property to the row:
<table border=1>
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr style="height: 1.5em">
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>

One suboptimal option could be to add an empty column:
<table>
<tr> <td rowspan="2">1</td> <td>2</td> <td class="void"></td> </tr>
<tr> <td rowspan="2">3</td> <td class="void"></td> </tr>
<tr> <td>4</td> <td class="void"></td> </tr>
</table>
CSS:
table,td {border:1px solid}
.void {height:1em;padding:0;border:0}
However, the spacing between columns leads to unnecessary space for the added column:
As this problem could be solved with padding-left for TD and a cellspacing of 0 for the table, this solution would not be general enough, so I'm still waiting for a good idea.

SQL unpivot row to N rows (based on column value)

I have a table looking like the example below, and trying to UNPIVOT the table to hold only ONE link per row, and adding an info column, based on the UNPIVOT.
I managed to get partly to my desired result, but need a bit help for the last part. I have this Query so far:
SELECT Theme, Area, URL
FROM
(
SELECT Theme, Area, URL_1, URL_2, URL_3
FROM table
) AS a
UNPIVOT
(
URL FOR URLs IN (URL_1, URL_2, Url_3)
) AS b WHERE URL <> '';
How to add this extra Column, with info based on the URL?
Thank you in advance.
<h1>Have</h1>
<table border="1" cellpadding="1" cellspacing="2">
<tr>
<th>Theme</th>
<th>Area</th>
<th>URL_1</th>
<th>URL_2</th>
<th>URL_3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>Some URL</td>
<td></td>
<td></td>
</tr>
<tr>
<td>A</td>
<td>C</td>
<td>Some URL</td>
<td>Some URL</td>
<td></td>
</tr>
<tr>
<td>D</td>
<td>B</td>
<td>Some URL</td>
<td>Some URL</td>
<td></td>
</tr>
<tr>
<td>B</td>
<td>D</td>
<td>Some URL</td>
<td>Some URL</td>
<td>Some URL</td>
</tr>
</table>
<h1>Would like</h1>
<table border="1" cellpadding="1" cellspacing="2">
<tr>
<th>Theme</th>
<th>Area</th>
<th>URL</th>
<th>Type</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>Some URL</td>
<td>1</td>
</tr>
<tr>
<td>A</td>
<td>C</td>
<td>Some URL</td>
<td>1</td>
</tr>
<tr>
<td>A</td>
<td>C</td>
<td>Some URL</td>
<td>2</td>
</tr>
<tr>
<td>D</td>
<td>B</td>
<td>Some URL</td>
<td>1</td>
</tr>
<tr>
<td>D</td>
<td>B</td>
<td>Some URL</td>
<td>2</td>
</tr>
<tr>
<td>B</td>
<td>D</td>
<td>Some URL</td>
<td>1</td>
</tr>
<tr>
<td>B</td>
<td>D</td>
<td>Some URL</td>
<td>2</td>
</tr>
<tr>
<td>B</td>
<td>D</td>
<td>Some URL</td>
<td>3</td>
</tr>
</table>
<h1>What I got so far</h1>
<table border="1" cellpadding="1" cellspacing="2">
<tr>
<th>Theme</th>
<th>Area</th>
<th>URL</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>Some URL</td>
</tr>
<tr>
<td>A</td>
<td>C</td>
<td>Some URL</td>
</tr>
<tr>
<td>A</td>
<td>C</td>
<td>Some URL</td>
</tr>
<tr>
<td>D</td>
<td>B</td>
<td>Some URL</td>
</tr>
<tr>
<td>D</td>
<td>B</td>
<td>Some URL</td>
</tr>
<tr>
<td>B</td>
<td>D</td>
<td>Some URL</td>
</tr>
<tr>
<td>B</td>
<td>D</td>
<td>Some URL</td>
</tr>
<tr>
<td>B</td>
<td>D</td>
<td>Some URL</td>
</tr>
</table>

short answer:
SELECT Theme, Area, UrlKind, URL
FROM
(
SELECT Theme, Area, URL_1, URL_2, URL_3
FROM table
) AS a
UNPIVOT
(
URL FOR UrlKind IN (URL_1, URL_2, Url_3)
) AS b WHERE URL <> '';
So name of that column is defined by FOR ... part of unpivot.

<td style='text-align: right'> incorrectly aligned in IE11

I am trying to right align the values, but those are not aligning properly to the end of the column.
Example code:
<table id="demoTable1" cellspacing="0" cellpadding="0" border="1">
<thead>
<tr>
<th style="text-align:right; width:23%"><bean:message key="label.amount"/></th>
</tr>
</thead>
<tbody >
<c:forEach items="${demoForm.amount}" var="amt" >
<tr>
<td dntitle="myAmt" style="text-align:right; width:23%">
<util:myCurrency name="amt" property="amtList" currProperty="curCode"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
And the Output looks like this:
How can I fix this?

Nested tables with related parent content

Having a semantics issue. I have a basic table with a standard header and footer. Each row contains an order, beneath each row I need to display another table, that will contain a break down of costs relating to that order. Additionally, these inner tables will be displayed with a jQuery accordion to hide and show when required (but I'm just concentrating on the HTML for now)
How can I semantically approach this in HTML?
<table>
<thead>
<th>Package number</th>
<th>Date placed</th>
<th>Placed by</th>
<th>Total cost</th>
</thead>
<tr>
<td>1</td>
<td>Weds</td>
<td>Jonno</td>
<td>£15</td>
</tr>
<tr>
<td colspan="4">
<table>
<thead>
<th>Part number</th>
<th>Description</th>
<th>Qty shipped</th>
<th>Weight</th>
</thead>
<tbody>
<td>18293</td>
<td>Blah blah blah</td>
<td>72</td>
<td>20Kg</td>
</tbody>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Thurs</td>
<td>Jonno</td>
<td>£1</td>
</tr>
<tr>
<td>3</td>
<td>Fri</td>
<td>Jonno</td>
<td>£7</td>
</tr>
</table>
Here's a fiddle: http://jsfiddle.net/yuW7f/ - The problem here is that the row containing the inner table, is totally unrelated to the order row

If you are looking for a parent element you can use to group related rows, you can use <tbody> elements. A table can have multiple <tbody> elements:
<table>
<thead>
<tr>
<th>Package number</th>
<th>Date placed</th>
<th>Placed by</th>
<th>Total cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Weds</td>
<td>Jonno</td>
<td>£15</td>
</tr>
<tr>
<td colspan="4">
<table>
<thead>
<tr>
<th>Part number</th>
<th>Description</th>
<th>Qty shipped</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>18293</td>
<td>Blah blah blah</td>
<td>72</td>
<td>20Kg</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tr>
<td>2</td>
<td>Thurs</td>
<td>Jonno</td>
<td>£1</td>
</tr>
<tr>
<td>3</td>
<td>Fri</td>
<td>Jonno</td>
<td>£7</td>
</tr>
</table>
Whether or not that makes your code more semantically correct is debatable. You could also give your rows classes to indicate whether the row is a summary row or a detail row, or attributes to indicate relationships to other rows. Semantically, it seems fine as it is to me.
By the way, you are missing some <tr> elements. A <tbody>, <thead>, or <tfoot> element does not replace a <tr> element.