I'm looking for a quick way to get a responsive html table for a huge set of data (more than 500 row with 15 columns by row).
I tried many javascript solutions like footable but it's really too slow.
The footable render is perfect but I would like to find a similar solution with only css tricks.
The main goal is to have a normal table for desktop and a partial table with only some columns displayed in mobile version and a click action that expand the rest of the columns Under the current table row like footable.
html example
<table class="f-tab">
<thead>
<tr>
<th>name</th>
<th>d1</th>
<th>d2</th>
<th>d3</th>
<th>d4</th>
<th>d5</th>
<th>d6</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">item 1</td>
<td class="d1">val 1</td>
<td class="d2">val 2</td>
<td class="d3">val 3</td>
<td class="d4">val 4</td>
<td class="d5">val 5</td>
<td class="d6">val 6</td>
</tr>
...
</tbody>
</table>
css example
.f-tab {
min-width: 320px;
}
.f-tab th, .f-tab td {
display: none;
}
.f-tab tr.visible td {
display: block;
}
.f-tab td.name, .f-tab td.d1, .f-tab td.d3 {
display: inline-block;
}
#media (min-width: 480px) {
.f-tab th, .f-tab td {
display: table-cell;
}
}
.f-tab {
overflow: hidden;
}
js example
$(".f-tab tr").click(function () {
$(this).toggleClass("visible");
});
in my example, I want to display the column "name", "d1" and "d3" as table columns and have the other columns in display block Under the current row when I click on a tr.
___________________
name | d1 | d3
d2
d4
d5
d6
___________________
I tried at first with nested ul/li but I couldn't get something good.
Related
I'd like to create a table with content from my database. I have a table without a header for multiple reasons (e.q. scrolling). Is it possible set the colums to the same width as the table before without JS? I dont want to add a class to each td element if possible. Not all columns have the same width. Nth-child is a bad solution because I have multiple tables.. :/
Here is a shorter version of my table:
table, th, td {
border: 1px solid #000;
}
table {
border-collapse: collapse;
}
.h1 {
width: 125px;
}
.h2 {
width: 150px;
}
<table>
<tr>
<th class="h1">
<span>a</span>
</th>
<th class="h2">
<span>b</span>
</th>
</tr>
</table>
<table>
<tr>
<td>
<span>c</span>
</td>
<td>
<span>d</span>
</td>
</tr>
</table>
one of the tables has header and one of them doesn't. and in your css you do not specify the table without header... you should has a code like this
table , tr, td{}
Build the table with
for mobile layout, need to change layout like below. Not sure whether collapsible by Rows or columns.
Can bring this layout via CSS? In case, we need to add margin top & bottom for "B" row is it possible to update via CSS?
Can please provide your valuable comments?
Thanks
th, td{
width: 100px;
text-align: center;
border: 1px solid red;
}
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
I have a table with one header and columns, and I am expand/collapse based on header click by the below code:
$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
My table is below:
What I need is. When I click first then it should collapse and show only first column that mean the column with data1 others should hide as below:
And it should show + button and when I click again it should go back to previous state.
Please note fiddle: Fiddle
Use:
$(this).toggleClass('expand').next('tr').find('td').not('td:first')
To exclude the first td.
Use this if you have more than one row:
$(this).toggleClass('expand').nextAll('tr').find('td').not('td:first-child').slideToggle(100);
Demo
$('.header').click(function() {
$(this).toggleClass('expand').nextAll('tr').find('td').not('td:first-child').slideToggle(100);
});
table,
tr,
td,
th {
border: 1px solid black;
border-collapse: collapse;
}
tr.header {
cursor: pointer;
}
.header .sign:after {
content: "+";
display: inline-block;
}
.header.expand .sign:after {
content: "-";
}
<table border="0">
<tr class="header expand">
<th colspan="4">Header <span class="sign"></span></th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I've looked around a bit and can't seem to find a decent solution, that doesn't require some crazy JavaScript, to the following problem.
There are two separate tables in the example. The first one is just for the headers. The second is for the body. We need two tables because the requirement for this feature is that the body table be locally scrollable, meaning the headers need to remain visible as the table body scrolls. We cannot use any new fancy HTML 5 pivot tables because we have to support IE.
Is there a way to accomplish this with pure CSS? It doesn't have to be perfect, just as long as it looks decent that's all I need.
This is a sample of the concept, using Jquery. (You can do it vanilla, but requires more code)
<table id="tb1" border="1">
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
<td>Title 4</td>
</tr>
</table>
<table id="tb2" border="1">
<tr>
<td>Content 00001</td>
<td>Content 02</td>
<td>Content 0000000000003</td>
<td>Content 000000000000000000004</td>
</tr>
</table>
JS:
function SetSize() {
var i = 0;
$("#tb2 tr").first().find("td").each(function() {
$($("#tb1 tr").first().find("td")[i]).width(
$(this).width()
);
i++;
});
}
$(window).resize(SetSize);
SetSize();
No "crazy javascript" :D
Here's a working fiddle, with a few css to make it look better: http://jsfiddle.net/5mfVT/
Definitely doable in just CSS. Just set widths on both tables, trs, and tds, apply word-wrapping, and setting table-layout to fixed. This last setting makes it use the defined column widths, rather than be determined by the cell content's width.
#tb1 { width: 80%; }
#tb2 { width: 80%; }
#tb1 tr { width: 100%; }
#tb2 tr { width: 100%; }
.col1 { width: 35%; }
.col2 { width: 35%; }
.col3 { width: 20%; }
.col4 { width: 10%; }
#tb1, #tb2 { table-layout: fixed; }
#tb1 td, #tb2 td { word-wrap: break-word; }
<table id="tb1" border="1">
<tr>
<td class="col1">Title 1</td>
<td class="col2">Title 2</td>
<td class="col3">Title 3</td>
<td class="col4">Title 4</td>
</tr>
</table>
<table id="tb2" border="1">
<tr>
<td class="col1">Content 00001</td>
<td class="col2">Content 02</td>
<td class="col3">Content 0000000000003</td>
<td class="col4">Content 000000000000000000004</td>
</tr>
</table>
Tables resize to as small as possible. Your headers' table has narrower content and can therefore resize to smaller widths before seizing to resize.
A non-Javascript solution is to either define widths for all of your columns or to define a min-width property your tables that fits the larger of the two minimal widths.
Good day programmers,
Being an amateur, I hunted around and found someone who created a very nice jQuery drop-down table. I found a terrific one...
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
And the CSS...
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:left;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#222222 url(header_bkg.png) repeat-x scroll center left; color:#FFF; padding:3px 8px; text-align:center;}
#report td { background:#111111 none repeat-x scroll top left; color:#000; padding:3px 8px; text-align:center;}
#report tr.odd td { background:#000000 url(row_bkg.png) repeat-x scroll center left; cursor:pointer;}
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
By itself, it works just fine... you can see the gaming page I use it on at the following link:
http://www.mynextbit.com/Pages/Wreckedified/roster.html
I'm trying to figure out a way to make it to where I could drop down maybe 12 or so rows instead of just one to show a bunch of data about one of those characters in the table. I did some digging and thought I could re-write the jQuery using the
nth-child(12n+0)
But couldn't quite pull it off. Am I on the right track at least or is there a more obvious and simple solution?
Have you considered that it might be possible to simply start a new table within your rows so you can keep the existing functionality?
Right now your HTML looks a bit like this:
<table>
<thead>
<th>Character</th><th>iLevel</th><th>And your other columns...</th>
</thead>
<tbody>
<tr>
<td>CharacterName (Build)</td><td>559</td><td>other column data...</td>
</tr>
<tr>
<td>This is your hidden data row</td>
</tr>
</tbody>
</table>
Instead of trying to alter the script so that it hides/shows the next 12 <tr> tags you could just create a new table inside your hidden data row...
<table>
<thead>
<th>Character</th><th>iLevel</th><th>And your other columns...</th>
</thead>
<tbody>
<tr>
<td>CharacterName (Build)</td><td>559</td><td>other column data...</td>
</tr>
<tr>
<td>
<table>
<tr><td>Hidden data row 1</td></tr>
<tr><td>Hidden data row 2</td></tr>
<tr><td>Hidden data row 3</td></tr>
<tr><td>Hidden data row 4</td></tr>
<tr><td>Hidden data row 5</td></tr>
<tr><td>Hidden data row 6</td></tr>
<tr><td>Hidden data row 7</td></tr>
<tr><td>Hidden data row 8</td></tr>
<tr><td>Hidden data row 9</td></tr>
<tr><td>Hidden data row 10</td></tr>
<tr><td>Hidden data row 11</td></tr>
<tr><td>Hidden data row 12</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
But table are "oldschool" so if you draw a picture of what you want to display we might be able to give you some alternative ways too.