I want to sort td elements within different trs. When Mobile Size Becomes - html-table

<table id="layouttable">
<tr>
<td class='col1'>1</td>
<td class='col2'>2</td>
<td class='col3'>3</td>
</tr>
<tr>
<td class='col4'>4</td>
<td class='col5'>5</td>
<td class='col6'>6</td>
</tr>
</table>
When Mobile Size Becomes
1 4
2
5
3
6
I want to list them in the order above.
flex - order was not available because of tr.
Does anyone know of a really simple solution like this?


A quick and very dirty solution:
#media only screen and (max-width: 600px) {
.desktop-table
{
display: none;
}
}
#media only screen and (min-width: 601px) {
.mobile-table
{
display: none;
}
}
<table id="layouttable" class="desktop-table">
<tr>
<td class='col1'>1</td>
<td class='col2'>2</td>
<td class='col3'>3</td>
</tr>
<tr>
<td class='col4'>4</td>
<td class='col5'>5</td>
<td class='col6'>6</td>
</tr>
</table>
<table id="layouttable-mobile" class="mobile-table">
<tr><td class='col1'>1</td></tr>
<tr><td class='col4'>4</td></tr>
<tr><td class='col2'>2</td></tr>
<tr><td class='col5'>5</td></tr>
<tr><td class='col3'>3</td></tr>
<tr><td class='col6'>6</td></tr>
</table>

Related

How do I convert a flickity table using multiple tables into a single table

So I am having issues converting my responsive carousel table from individual tables to a single table, any help would be much appreciated.
<table class="table-head">
<thead>
<th>Head</th>
</thead>
<tbody>
<tr>
<td>Attr1</td>
</tr>
<tr>
<td>Attr2</td>
</tr>
<tr>
<td>Attr3</td>
</tr>
<tr>
<td>Attr4</td>
</tr>
</tbody>
</table>
<div class="table-scroll carousel">
<table class="carousel-cell">
<th>Title1</th>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title2</th>
<tr>
<td>21</td>
</tr>
<tr>
<td>22</td>
</tr>
<tr>
<td>23</td>
</tr>
<tr>
<td>24</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title3</th>
<tr>
<td>31</td>
</tr>
<tr>
<td>32</td>
</tr>
<tr>
<td>33</td>
</tr>
<tr>
<td>34</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title4</th>
<tr>
<td>41</td>
</tr>
<tr>
<td>42</td>
</tr>
<tr>
<td>43</td>
</tr>
<tr>
<td>44</td>
</tr>
</table>
</div>
To then turn it into something like this
<div class="table-scroll carousel">
<table class="table-head">
<tr class="carousel-cell">
<th>Date</th>
<td>2021</td>
<td>01 June</td>
<td>05 June</td>
<td>05 June</td>
<td>08 June</td>
<td>10 June</td>
<td>16 June</td>
<td>24 June</td>
<td>25 June</td>
<td>30 June</td>
<td>30 June</td>
<td>30 June</td>
<td>30 June</td>
<td> </td>
</tr>
<tr class="carousel-cell">
<th>Details</th>
<td> </td>
<td>Bal b/f</td>
<td>Cheque no 816078</td>
<td>Bank Giro credit</td>
<td>Bank Giro credit</td>
<td>Cheque no 816079</td>
<td>Direct debit</td>
<td>Bank charges</td>
<td>Direct debit</td>
<td>Cheque no 816081</td>
<td>SO payment</td>
<td>BACS payment</td>
<td>CHAPS payment</td>
<td>Interest</td>
</tr>
<tr class="carousel-cell">
<th>Debit</th>
<td>£</td>
<td> </td>
<td>800</td>
<td> </td>
<td> </td>
<td>1,864</td>
<td>700</td>
<td>52</td>
<td>400</td>
<td>1,290</td>
<td>300</td>
<td>100</td>
<td>70</td>
<td> </td>
</tr>
<tr class="carousel-cell">
<th>Credit</th>
<td>£</td>
<td> </td>
<td>2,000</td>
<td>2,500</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>20</td>
</tr>
<tr class="carousel-cell">
<th>Balance</th>
<td>£</td>
<td>8,196 C</td>
<td>7,396 C</td>
<td>9,396 C</td>
<td>12,896 C</td>
<td>11,032 C</td>
<td>10,332 C</td>
<td>10,280 C</td>
<td>9,880 C</td>
<td>8,590 C</td>
<td>8,290 C</td>
<td>8,190 C</td>
<td>8,120 C</td>
<td>8,140 C</td>
</tr>
</table>
</div>
The CSS for both looks like this
.table-head {
float: left;
width: 80px;
border-right: 2px solid #333;
border-collapse: collapse
}
.table-scroll {
float: left;
width: calc(100% - 81px);
border-top: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
background-color: #AAA;
}
.table-scroll table {
margin-top: -1px;
width: 30%;
min-width: 300px;
max-width: 40%;
border-collapse: collapse;
}
th {
text-align: left;
background-color: #f2f2f2;
color: #0076BF;
}
th, td {
padding: 10px;
border: 1px solid #333;
background-clip: padding-box;
}
td {
background-color: #fff;
}
And the flickity config
var elem = document.querySelector('.carousel');
var flkty = new Flickity( elem, {
// options
freeScroll: true,
contain: true,
prevNextButtons: false,
groupCells: true,
cellAlign: 'left'
});
Both are displayed on codepen, multiple tables https://codepen.io/joshuaserpis/pen/ZEojLKR
Single table https://codepen.io/joshuaserpis/pen/oNoOgYN

Colspan of 1.5 in a table

Is it possible with HTML/CSS to create a table with three columns, where one row has only two cells. However, instead of one cell of that row being 66% (colspan="2") and the other being 33%, both to be 50% (so errh, colspan="1.5" which doesn't work as expected)
To illustrate what I mean:
What I am talking about is the row which is in bold red, is this possible?

Sure, just like the following:
table,
td {
border: 1px solid #999;
}
td {
height: 20px;
width: 50px;
}
<table>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
</table>

table,
td {
border: 1px solid #999;
}
td {
height: 20px;
width: 50px;
}
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
</table>

(CSS/Bootstrap 4) Add a cell to a specific table column

I have this table of input fields and was wondering how to add new "cells" to specific columns. Just like this:
Is there a way to do this by simply adding a new <tr>. Or do I have to do this by adding input fields with labels outside of a <table> element. If I go this route, is there Bootstrap/CSS stylings I could add to "attach" these fields to those table columns so they would resize with them?

If I understand you question correctly, you can just add a new row. Use the colspan attribute on the td to specific how many column the cell will span. In your case, your first cell that contains "TOTAL" will span across 6 cells, which will be like <td colspan="6">TOTAL</td>, and apply some some css styles to remove the border and align the text to the right.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
th, td {
min-width: 70px;
height: 20px;
}
td.total {
text-align: right;
padding-right: 5px;
}
.no-border {
border: none;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="total">
<td colspan="6" class="total no-border">TOTAL</td>
<td></td>
<td class="total no-border">TOTAL</td>
<td></td>
<td class="no-border"></td>
</tr>
</table>

<tfoot>
<tr>
<th colspan="6" style="text-align:right">Total:</th>
<th></th>
<th colspan="1" style="text-align:right">Total:</th>
<th colspan="2" style="text-align:right"></th>
</tr>
</tfoot>
then please see this code
https://datatables.net/examples/advanced_init/footer_callback.html

Selenium C# List Elements between Xpaths

I was wondering if this is capable/ anyone has an example.
The webpage I'm accessing has a very structured layout and uses comments to start and finish sections.
In each section their is always a opening comment, a closing comments and a <h3></h3> and then only sometimes a <table></table>
If I know the Xpaths where a section starts and where it finishes is there a way to loop this range?
HTML
<!-- Asset Allocation -->
<h3 style="border-top: 1px solid #CCCCCC; margin-top: 20px;">Asset Allocation</h3>
<p class="fundreportsubheading">% as at 31 Aug 2017</p>
<table class="table2 tablefundreport noth">
<tbody><tr class="N_Qodd">
<td style="text-align: left;">Domestic Equity</td>
<td>4.181</td>
</tr>
<tr class="N_Qeven">
<td style="text-align: left;">International Equity</td>
<td>95.494</td>
</tr>
<tr class="N_Qodd">
<td style="text-align: left;">Listed Property</td>
<td>0.000</td>
</tr>
<tr class="N_Qeven">
<td style="text-align: left;">Unlisted Property</td>
<td>0.000</td>
</tr>
<tr class="N_Qodd">
<td style="text-align: left;">Domestic Fixed Interest</td>
<td>0.000</td>
</tr>
<tr class="N_Qeven">
<td style="text-align: left;">International Fixed Interest</td>
<td>0.000</td>
</tr>
<tr class="N_Qodd">
<td style="text-align: left;">Cash</td>
<td>0.325</td>
</tr>
<tr class="N_Qeven">
<td style="text-align: left; border-bottom: none;">Other</td>
<td style="border-bottom: none;">0.000</td>
</tr>
</tbody></table>
<!-- /Asset Allocation -->
Sample comment Xpaths
//*[#id="maincontent"]/div[2]/div[3]/comment()[3]
//*[#id="maincontent"]/div[2]/div[3]/comment()[4]

html table td size fixed and relative mixed

For example,
<table width="100%">
<tr>
<td width="40"></td> // left margin
<td width="10">0</td>
<td width="%"></td>
<td width="10">3</td>
<td width="%">0</td>
<td width="10">6</td>
<td width="%">0</td>
<td width="10">9</td>
<td width="40"></td> // right margin
</tr>
</table>
I want to have the fixed number column is fixed and others is relative. I tried 25% each. but still not working.

Based on the question, this is how I would structure it. Here is a JSFiddle demonstrating the code.
CSS:
table {
width: 100%;
}
td.fixed {
position: fixed;
width: 40%;
}
td.others {
padding: 0 10px;
width: 10%;
}
HTML:
<table>
<tr>
<td class="fixed"></td>
<td class="others">0</td>
<td class="others">3</td>
<td class="others">6</td>
<td class="others">9</td>
<td class="fixed"></td>
</tr>
</table>