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>
Related
I have this short piece of code that allows for sections of a table to be collapsed (they are like collapsible headers). This is neat, but I'm trying to make for the inverse to happen upon loading the page -- to be collapsed by default on load, but expandable when clicked. How would I go about doing this?
My present code, shown below, also features sections that only collapse when the words in the section are clicked, not when the section itself (outside of the words) are clicked. This is because I used labels to make the collapsible. Is there a way to make the entire row expandable/collapsible?
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial;
}
[data-toggle="toggle"] {
display: none;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tbody class="labels">
<tr>
<td colspan="2">
<label for="section">Click me!</label>
<input type="checkbox" id="section" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Jack</td>
<td>100</td>
</tr>
<tr>
<td>Jill</td>
<td>300</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function() {
$(this).parents().next('.hide').toggle();
});
});
</script>
I'm trying to make for the inverse to happen upon loading the page --
to be collapsed by default on load, but expandable when clicked. How
would I go about doing this?
Simply add a line in your jquery above your toggle function and call on your .hide class selector and use .hide(); Then when you click it the toggle function fires.
also features sections that only collapse when the words in the
section are clicked, not when the section itself (outside of the
words) are clicked. This is because I used labels to make the
collapsible. Is there a way to make the entire row
expandable/collapsible?
Yes... Make your label display as block in your CSS file...
label {
display: block;
}
$(document).ready(function() {
$('.hide').hide();
$('[data-toggle="toggle"]').change(function() {
$(this).parents().next('.hide').toggle();
});
});
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial;
}
[data-toggle="toggle"] {
display: none;
}
label {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tbody class="labels">
<tr>
<td colspan="2">
<label for="section">Click me!</label>
<input type="checkbox" id="section" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Jack</td>
<td>100</td>
</tr>
<tr>
<td>Jill</td>
<td>300</td>
</tr>
</tbody>
</table>
Several things going on here...
You were hiding your checkbox, which I don't think was your intent.
Check this example, where I fixed some things: https://jsfiddle.net/za73qf65/
Fixes include:
changing the name of your "hide" class to "hidable"
defaulting that "hidable" class to be display:none
unhiding your checkbox
changing your change() event handler to a click() (optional)
attaching your event handler to a button with an ID (you can vary that)
Point is, with my changes, your example works. You might want to tweak it for a more specific need.
I'm encountering the strangest thing. I'm using a simple jquery script to make a thead stay in place while the tbody scrolls. It works really well, except for some strange behavior with the border. Check out the Pen, and you can see the red border at the bottom of each th. I've tried putting it on the thead and the tr of the thead but it always behaves the same. It disappears under... itself? I'm not even sure.
http://codepen.io/sinrise/pen/NrxgWG
I'm using bootstrap and SCSS.
My solution for now is to add a :before to the ths that is just an abs pos box the height of the width of the border I want. It works fine but I'd really like to use an actual border, if possible. Thanks!
HTML
<div class="container">
<div class="table-fixedheader" style="height: 200px; overflow-y: auto;">
<table class="table table-striped">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="#1" /></td>
<td>Thing</td>
<td>This is a long desctiption of some thing.</td>
</tr>
<tr>
<td>#2</td>
<td>Thing</td>
<td>This is a long desctiption of some thing.</td>
</tr>
<tr>
<td>#3</td>
<td>Thing</td>
<td>This is a long desctiption of some thing.</td>
</tr>
<tr>
<td>#4</td>
<td>Thing</td>
<td>This is a long desctiption of some thing.</td>
</tr>
<tr>
<td>#5</td>
<td>Thing</td>
<td>This is a long desctiption of some thing.</td>
</tr>
<tr>
<td>#6</td>
<td>Thing</td>
<td>This is a long desctiption of some thing.</td>
</tr>
<tr>
<td>#7</td>
<td>Thing</td>
<td>This is a long desctiption of some thing.</td>
</tr>
<tr>
<td>#8</td>
<td>Thing</td>
<td>This is a long desctiption of some thing.</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
.container { padding: 30px; }
.table-fixedheader table thead tr th {
border-bottom: 5px solid red;
position: relative;
}
.table-fixedheader thead {
background-color: #cccccc;
}
JQ
$(".table-fixedheader").scroll(function() {
$(this).find("thead").css("transform", "translate(0," + this.scrollTop + "px)");
});
It is because of the translate property. Try to fix the thead using position property. Here is your codepen for answer:
$(".table-fixedheader").scroll(function() {
$(this).find("thead").css({'position':'absolute', 'width': $('.table').width() });
});
http://codepen.io/SESN/pen/BzKepx
So far there are no solutions that don't involve changing the layout of the table with a fixed or absolutely positioned thead. The best solution is my own, but it involves not actually using a border. I just add:
&:before {
border: 0;
content: "";
position: absolute;
left: 0; bottom: -2px;
width: 100%; height: 2px;
background-color: red;
}
to the th of the thead and that works quite well. I suppose this is as good as it gets. The JS is minimal and otherwise reliable, and won't break the functionality of other scripts acting on tables, or mess with my layout. I hope this helps someone else, too! :)
Have created HTML table below,
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
The contents in the table are fixed. Is there any way in d3.js to automate the contents within the table. i.e the row changes its position dynamically(autoplay) from 1 to 3; 2 to 1 ; 3 to 2 etc . More like D3 dynamic table with static data. There is concept of update, enter and exit in d3js, will that help to arrive at the solution if so please help.
In d3, there's a concept of a transition, which is probably what you're looking for. Here's a link to a tutorial on that.
https://bost.ocks.org/mike/transition/
Here is a simple example of changing the background color to red:
d3.select("body")
.transition()
.style("background-color", "red");
I haven't tried it myself, but I think you can use this concept for selecting specific rows of the table, and either changing the values in it, or move the td tags around. A combination of jquery and d3 might work here.
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.
I'm attempting to create a table with reorderable columns using jQuery UI's "sortable" interaction. However, I'm having trouble on IE with table-layout: fixed.
The sortable is attached to the table's thead > tr and works just fine. The table looks correct when not dragging a column heading. While dragging, however, IE increases the width of the table to 100% and makes the dragged heading's column wider to make up the difference. I've tried specifying the width via <col> elements (which seem to be completely ignored by IE?), setting widths on each <td>, using forcePlaceholderSize, and combinations of the three, but nothing seems to work.
Code is below and on jsFiddle. Note that the logic to actually swap columns and correct their widths after dragging is finished hasn't been included; right now, I'm only concerned with the (mis-)behavior while dragging.
HTML:
<table>
<col style="width:90px">
<col style="width:130px">
<col style="width:70px">
<thead>
<tr>
<th style="width:90px">width 90</th>
<th style="width:130px">width 130</th>
<th style="width:70px">width 70</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:90px">foo</td>
<td style="width:130px">bar</td>
<td style="width:70px">baz</td>
</tr>
<tr>
<td style="width:90px">wibble</td>
<td style="width:130px">wobble</td>
<td style="width:70px">wubble</td>
</tr>
<tr>
<td style="width:90px">lorem</td>
<td style="width:130px">ipsum</td>
<td style="width:70px">dolor</td>
</tr>
</tbody>
</table>
CSS:
table {
border-collapse: collapse;
table-layout: fixed;
}
td, th {
background: white;
border: 1px solid #999;
padding: 0 .25em;
}
JS:
$("thead tr").sortable({
forcePlaceholderSize: true,
helper: "clone",
tolerance: "pointer"
});