I have something like this for big screens:
<table>
<thead>
<tr>
<th>title and image</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
title
<br /><img scr="">
</td>
<td>
few words about...
</td>
</tr>
</tbody>
</table>
And I would like to change it to the following code for smaller screen:
<table>
<thead>
<tr>
<th>title and description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
title
<br />few words about...
</td>
</tr>
</tbody>
</table>
Do you know how to do that properly? :)
I'd like to do it with CSS only but I can code in PHP and JS as well.
Thanks all and have a good day!
You could - in a media query - use this CSS to convert the rows into cells and the cells into simple inline elements:
tr {
display: table-cell;
}
td {
display: inline;
}
<table>
<thead>
<tr>
<th>title and image</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
title
<br /><img scr="">
</td>
<td>
few words about...
</td>
</tr>
</tbody>
</table>
There's a css feature called a media query that allows you to apply css rules conditionally based on properties of the display. For instance, it could be used with a condition like min-width(700px) to target large screens and something like max-width(320px) for small screens.
The following approach will have repetition in your markup but if you're using PHP to render it, then you could reduce repeated code by storing the repeated markup in variables and referencing those.
CSS:
#media (min-width: 321px) {
.small-screen {
display: none;
}
}
#media (max-width: 320px) {
.large-screen {
display: none;
}
}
HTML:
<table>
<thead>
<tr class="large-screen">
<th>title and image</th>
<th>description</th>
</tr>
<tr class="small-screen">
<th>title and description</th>
</tr>
</thead>
<tbody>
<tr class="large-screen">
<td>
title
<br /><img scr="">
</td>
<td>
few words about...
</td>
</tr>
<tr class="small-screen">
<td>
title
<br />few words about...
</td>
</tr>
</tbody>
</table>
with css media queries, above a certain browser or screen width, show "wideDisplay" and hide "narrowDisplay". When the browser is small, hide "wideDisplay" and show "narrowDisplay".
<table>
<thead>
<tr>
<td class="wideDisplay">title and image</td>
<td class="wideDisplay">description</td >
<td class="narrowDisplay">title and description</td>
</tr>
</thead>
</table>
Related
I've a table in my code which contains lots of rows and every row contains some td's, I want to find all the td's having z-index value.
For Example -
<table>
<thead>
<tr>
<td>name</td>
</tr>
</thead>
<tbody>
<tr>
<td style="z-index: 10">jhon</td>
</tr>
<tr>
<td>
doy
</td>
</tr>
<tr>
<td style="z-index: 20">jam</td>
</tr>
</tbody>
</table>
Can anybody help me to find all the td's having z-index value without using any loop?
You can find all the td's, then filter out those which don't have any z-index set. I'm fairly sure there's no way to do the initial select on a more specific level than this.
const test = [
...document.getElementsByTagName("td")
].filter(x => x.style.zIndex !== "")
test.forEach(x => x.style.color = "#"+((1<<24)*Math.random()|0).toString(16))
console.dir(test)
<table>
<thead>
<tr>
<td>name</td>
</tr>
</thead>
<tbody>
<tr>
<td style="z-index: 10">jhon</td>
</tr>
<tr>
<td>
doy
</td>
</tr>
<tr>
<td style="z-index: 20">jam</td>
</tr>
</tbody>
</table>
So this is give you the same result but with jquery and this is why i added a
position:relative
For z-index to work correctly, every element that has a z-index property must also have any position set ( e.g.position:relative )
$(document).ready(function() {
$("td").each(function() {
// td Element
const $this = $(this);
// your logic condition
if ($this.css("z-index") !== "auto") {
$this.css("color", "red");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>name</td>
</tr>
</thead>
<tbody>
<tr>
<td style=" position: relative; z-index: 10">jhon</td>
</tr>
<tr>
<td>
doy
</td>
</tr>
<tr>
<td style=" position: relative; z-index: 20">jam</td>
</tr>
</tbody>
</table>
I need to make the first two columns sticky in a table having n number of columns each of dynamic width.
I had tried the below CSS
td:nth-child(1), td:nth-child(2){
position:sticky;
left:0px;
}
And then I had set the left position of second column in JS by calculating the width of first column
var width = $("table tr > td:nth-child(1)").outerWidth();
$("table.matrix_class tr > td:nth-child(2)").css('left', width);
Now I need to do all the stuff in CSS not in JS. How do I do that in pure CSS?
Additionally, how do you do this when the first column width is dynamic?
You can do sticky header with using this css.
live working demo
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="zui-table">
<thead>
<tr>
<th class="zui-sticky-col">Name</th>
<th class="zui-sticky-col2">Number</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Prior to NBA/Country</th>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">DeMarcus Cousins</td>
<td class="zui-sticky-col2">15</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
<td>Kentucky/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Isaiah Thomas</td>
<td class="zui-sticky-col2">22</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
<td>Washington/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Ben McLemore</td>
<td class="zui-sticky-col2">16</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
<td>Kansas/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Marcus Thornton</td>
<td class="zui-sticky-col2">23</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
<td>Louisiana State/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Jason Thompson</td>
<td class="zui-sticky-col2">34</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
<td>Rider/USA</td>
</tr>
</tbody>
</table>
</div>
I am using sorttable to sort my columns in table.
Now I have a table as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr class="row-details">
<td>{.salesOrderId}</td>
<td colspan="4">
<table class="sortable draggable">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{#math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
</tr>
{/items}
</tbody>
</table>
</td>
</tr>
{/orders}
</tbody>
</table>
Have you noted in the above mentioned table I have row details for each row?
Now when I click on a column header to sort it, I get the row details first and then I get all the main rows.
Here is how my table looks before sorting:
Here is how my table looks after sorting:
Is there any solution to this problem still using sorttable?
Update:
Here is sample jsFiddle
Row details are now sorted correctly as shown in the above jsFiddle. But now the problem is :
When you click on City column everything looks fine. Now if we again click on City Column, the row details are displayed before the actual rows which is wrong.
Please look at the images below for more information on problem:
After Clicking on City Column: (Which looks perfect)
After Clicking on City Column Again: (Expected for a developer but unexpected for a user)
I'am guessing but maybe the problem is the empty td beside the row details. I added first name as value and set css style display:none. Now the row details will be sorted also correctly.
Updated answer:
try to just nest the table inside the td like the below example.
Try this:
<table class="sortable">
<thead>
<tr>
<th>First Name</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishal</td>
<td> Sherathiya
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>67</td>
</tr>
</tbody>
</table>
<td>
</tr>
<tr>
<td>Nikunj</td>
<td>Ramani
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>80</td>
</tr>
<tr>
<td>M.E.</td>
<td>54</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Raj</td>
<td>Gosai</td>
</tr>
</tbody>
</table>
I need to stress that this is about HORIZONTAL scrolling with THE FIRST COLUMN FIXED because most answers are giving me solutions to vertical scrolling.
Is it possible using pure css to have a table that scrolls horizontally but the first header and first column are fixed with the rest of the content scrollable?
For example if I had this table:
<table>
<thead>
<tr>
<th class="head1">Head 1</th>
<th class="head2">Head 2</th>
<th class="head2">Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">Col 1</td>
<td class="col2">Col 2</td>
<td class="col3">Col 3</td>
</tr>
</tbody>
</table>
The head1 and col1 would always be shown with the other columns scrollable.
This is what I was after. The example uses 2 tables that are floated left with an overflow applied to a div that wraps the right most table. Both tables are contained in a div with a fixed width.
<div class="table-container">
<div class="left">
<table>
...
</table>
</div>
<div class="right">
<table>
...
</table>
</div>
</div>
.table-container {
position: relative;
width: 600px;
height: 100%;
display: inline-block;
}
table {
float: left;
}
.right {
overflow: auto;
}
<table >
<tr>
<th>abc</th>
<th>xyz</th>
</tr>
<tr>
<td colspan="2">
<div style="height:50px; overflow:scroll;">
<table>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Please check it. It may be work.
Using jQuery Mobile - and the new ui-responsive class for a table - the table is supposed to collapse into a single column if the viewport becomes too narrow.
However - when I drag the browser to make the viewport smaller, it takes the first column heading, and adds it to the table footer:
Viewport wide enough:
Narrow Viewport:
My HTML markup is:
<table data-role="table" class="ui-responsive">
<thead>
<tr class="ui-bar-b">
<th>Column Header 1</th>
<th>Column Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select></select>
</td>
<td>
<select></select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="text-align:center;">
<button data-icon="plus">Add</button>
</td>
</tr>
</tfoot>
</table>
I've added a demo to jsFiddle here: http://jsfiddle.net/mtait/44k3E/2/
Is this just a bug in the Mobile CSS - or is it known, and is there a work around?
Thank you,
Mark
It is not adding extra header. This is the way in which it works. It will put the heading above each column values when its width reduces.
For better understanding refer to the updated fiddle link. DEMO
<table data-role="table" class="ui-responsive">
<thead>
<tr class="ui-bar-b">
<th>Column Header 1</th>
<th>Column Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select></select>
</td>
<td>
<select></select>
</td>
</tr>
<tr>
<td>
<select></select>
</td>
<td>
<select></select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button data-icon="plus">Add</button>
</td>
<td>
<button data-icon="plus">Add</button>
</td>
</tr>
</tfoot>
</table>