I Want To Change The Table From A Horizontal Group To A Vertical Group
I'm creating a Table like this, but when I write the HTML, how can I write it in vertical groups (days of the week) instead of horizontal groups (numbers)? I would appreciate it if
Solution 1:
AFAIK there is no inbuilt way that you can do this (write in column rather than row order) in HTML.
However, what you could do is write your timetable in rows - so Monday is a row, Tuesday is a row etc - thus giving you the ability to group things in the way you want.
You can then transpose the table using Javascript at run-time.
This snippet takes code given by @johnvkumpf dated 22Feb (2021) in How to invert (transpose) the rows and columns of an HTML table? plus your original table but rewritten to have the days as rows.
<!DOCTYPE html><html><head><metacharset="utf-8"><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><style>a {
display: block;
width: 100%;
height: 100%;
}
table {
border-collapse: collapse;
}
.tabletd,
th {
border: solid 1px;
padding: 0.5em;
background: #ffffff;
width: 80px;
}
.table.td.table {
border-color: #ffffff;
}
</style></head><body><p><ahref="#"id="transposButton">Click me to transpose the table</a></p><tableclass="table"><tr><td></td><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr><tr><th>Monday</th><td><p>Content</p></td><td><p>Content</p></td><td></td><td></td><td></td><td></td></tr><tr><th>Tuesday</th><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><th>Wednesday</th><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><th>Thursday</th><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><th>Friday</th><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><th>Saturday</th><td></td><td></td><td></td><td></td><td></td><td></td></tr></table><script>
$("a#transposButton").click(function(){
$("table").each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(rowToColIndex){
$(this).find("td, th").each(function(colToRowIndex){
if(newrows[colToRowIndex] === undefined) { newrows[colToRowIndex] = $("<tr></tr>"); }
while(newrows[colToRowIndex].find("td, th").length < rowToColIndex){
newrows[colToRowIndex].append($("<td></td>"));
}
newrows[colToRowIndex].append($(this));
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});
returnfalse;
});
</script>
https://stackoverflow.com/questions/66986623/i-want-to-change-the-table-from-a-horizontal-group-to-a-vertical-group
http://jsfiddle.net/xsp4eqwz/2/
</body></html>
Post a Comment for "I Want To Change The Table From A Horizontal Group To A Vertical Group"