How can I make the table header appear on the left side of the table as a column instead on the top as a row? I have this markup:
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
Just use <th> as the first element in the row. Then add the scope attribute, which has no visual impact, but you could use it e.g. in CSS.
<table>
<tbody>
<tr>
<th scope="row">A</th>
<td>b</td>
</tr>
<tr>
<th scope="row">C</th>
<td>d</td>
</tr>
</tbody>
</table>
See also http://www.w3.org/TR/WCAG20-TECHS/H63
How's this?
Example
CSS
thead {
float: left;
}
thead th {
display: block;
}
tbody {
float: right;
}
jsFiddle.
Update
Well, the 1, 2 should also be as column, obviously.
jsFiddle.
It also looks like IE baulks at this. You may have to trade semantic-ness for cross browser compatibility.
You can see the result here. You mean like this?
<table border="1">
<thead>
<tr>
<th></th>
<th colspan="2">Letters</th>
</tr>
<tr>
<th></th>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Numbers</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>
You usually use rowspan and colspan for cells spanning multiple columns/rows.
I needed something a little different, but the answers by #alex and #marion got me started in the right direction. The problem was that when you needed many items in the table, the "columns" started stacking funny on smaller screens.
Thanks to Serge for his answer here that led me in this solution. This solution allows for scrolling horizontally and doesn't stack funny regardless of the size of the screen/window. I tested it in Chrome, Firefox, Opera, Edge, and IE11. Here's the fiddle with the correct alignment for the new "rows" and "columns": https://jsfiddle.net/berrym/6r3zvaef/21/
And just in case it disappears from JSFiddle:
<style>
table{
display:block;
white-space:nowrap;
width:100%;
}
td, th {
border-bottom: 1px solid red;
border-collapse: collapse;
}
thead {
float: left;
background: yellow;
width: 10%;
}
thead tr {
width:100%;
float:left;
}
thead th {
display: block;
}
tbody {
float: left;
width: 90%;
}
tbody tr {
display: inline-block;
}
tbody td {
float:left;
width:100%;
}
</style>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
</tbody>
</table>
This worked perfectly for me : (inspired from the first answer)
Example here
html :
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
</tbody>
</table>
css :
table, td, th {
border: 1px solid red;
}
thead {
float: left;
}
thead th {
display: block;
background: yellow;
}
tbody {
float: left;
}
tbody tr {
display: block;
float: left;
}
tbody td {
display: block;
}
If you use bootstrap, you can achieve this easily with the table-reflow style: http://v4-alpha.getbootstrap.com/content/tables/#reflow
Related
I'm trying to have a table according to value from another table so if I choose an item from table 1 it will create a new items row in table 2 and these items will be ordered and every item from the same category will be list under the title of this category.
this is a picture of how the result will be :
this is the sample code.
$("#table tr").click(function(){
var row=$('<tr><td><td></tr>>')
row.appendTo('#add')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Add item</h1>
<table id="table">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr>
<td colspan="2">Class A</td>
</tr>
<tr class="A">
<td id="1">A1</td>
<td id="2">1</td>
</tr>
<tr class="A">
<td>A3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Class B</td>
</tr>
<tr class="B">
<td>B1</td>
<td>2</td>
</tr>
<tr class="B">
<td>B3</td>
<td>4</td>
</tr>
<tr class="B">
<td>B1</td>
<td>2</td>
</tr>
<tr class="B">
<td>B3</td>
<td>4</td>
</tr>
</table>
<div>
</div>
<div>
</div>
<br>
<table id="add">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr>
<td colspan="2">Class A</td>
</tr>
<tr>
<td>A1</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Class B</td>
</tr>
<tr>
<td>B2</td>
<td>3</td>
</tr>
<tr>
<td>B3</td>
<td>2</td>
</tr>
</table>
</body>
</html>
One way to achieve this would be to use data attributes on each row of the source and destination tables. This way you can determine the group the source row came from so that you can place it in the same group in the destination table.
Also note that I added a class, .copyable-row, to each tr which is allowed to be cloned to the second table. Your current logic allowed the table headers themselves to be copied.
let $dest = $('#add');
$("#table tr.copyable-row").click(e => {
let $tr = $(e.currentTarget);
let group = $tr.data('group');
let $target = $dest.find(`tr[data-group="${group}"]:last`);
$tr.clone().insertAfter($target);
});
table {
margin: 0 0 10px;
}
table,
th,
td {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr>
<td colspan="2">Class A</td>
</tr>
<tr class="copyable-row" data-group="a">
<td>A1</td>
<td>1</td>
</tr>
<tr class="copyable-row" data-group="a">
<td>A3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Class B</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B1</td>
<td>2</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B3</td>
<td>4</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B1</td>
<td>2</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B3</td>
<td>4</td>
</tr>
</table>
<table id="add">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr data-group="a">
<td colspan="2">Class A</td>
</tr>
<tr data-group="a">
<td>A1</td>
<td>4</td>
</tr>
<tr data-group="b">
<td colspan="2">Class B</td>
</tr>
<tr data-group="b">
<td>B2</td>
<td>3</td>
</tr>
<tr data-group="b">
<td>B3</td>
<td>2</td>
</tr>
</table>
I have trying to make scrollable tbody in flexbox.
I got two flexbox and each flexbox has table in it.
When items in table are overflow I want to use vertical scrollbar in tbody.
But tables are in flexbox that has no fixed height.
What should I do to show vertical scrollbar in tbody?
.root {
background-color:green;
width: 200px;
height: 200px;
display: flex;
flex-flow:column nowrap;
}
.container1 {
display: flex;
flex-grow:4;
background-color:yellow;
}
.container1 tbody {
overflow: auto;
}
.container2 {
display: flex;
flex-grow:3;
background-color:blue;
}
<div class="root">
<div class="container1">
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class="container2">
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
Let me know if you need more info. thanks.
you should use overflow auto
css
.container1 {
display: flex;
flex-grow:4;
background-color:yellow;
overflow:auto;
}
I have made some changes please check !
.root {
background-color:green;
width: 60vw;
height: 30vh;
display: flex;
flex-flow:column nowrap;
}
.container1 {
display: flex;
flex-grow:4;
background-color:yellow;
overflow-y: auto;
}
/* this flexbox is not appears!! */
.container2 {
display: flex;
flex-grow:3;
background-color:blue;
}
<div class="root">
<div class="container1">
<table width="100%">
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class="container2">
</div>
</div>
Hi im a beginner in css i have these table below its 3 separate table and i would like to make all of the table column height equal is there any easy method to go about this? Any suggestion would be greatly appreciated thank you!
Here is my JSFiddle
<body>
<div class="center">
<table class="fruitsTable class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Apples</td>
</tr>
<tr>
<td>Grapes</td>
</tr>
<tr>
<td>Oranges</td>
</tr>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
<table class="fruitsTable2 class" >
<thead>
<th>Fruits</th>
</thead>
<tbody >
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
it's possible when a table change by CSS, but it's not good,
You can try this code here https://jsfiddle.net/10t4gv92/21/ Or
.fontcolor {
color: #25BAD0;
}
.center {
display: flex;
justify-content: center
}
.class {
font-family: Open Sans;
}
table,
table tr,
table tr td,
table tr th {
border-collapse: collapse;
}
table {
display: block;
width: 25%;
border:1px solid #25BAD0;
}
table tr,
table th,
table tr td,
table tbody,
table thead {
display:block;
width: 100%;
}
th {
width:100%;
color: #0080ff;
font-weight: normal;
border-bottom: 1px solid #25BAD0;
}
td {
width: 100%;
padding-top: 5px;
padding-left: 8px;
}
.fruitsTable th { width:100%; }
<div class="center">
<table class="fruitsTable class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Apples</td>
</tr>
<tr>
<td>Grapes</td>
</tr>
<tr>
<td>Oranges</td>
</tr>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
<table class="fruitsTable2 class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
<table class="fruitsTable3 class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
</div>
I have the code below:
tbody > tr:hover{
background-color: lightgrey;
cursor: pointer;
}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td >$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td >$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>
How can I highlight the whole row when I hover to the row.
For example, when I hover to January, it should highlight the whole January row instead of highlight only the half one because of the rowspan attribute.
Move the styling to the td under the hovered tr. In addition, highlight the sibling row, when the 1st row is hovered. The only caveat is that if the 2nd tr is hovered, it won't highlight the 1st cell.
tr:hover > td {
background-color: lightgrey;
cursor: pointer;
}
tr:nth-child(2n + 1):hover + tr {
background-color: lightgrey;
}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td>$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td>$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>
tr:hover td:not([rowspan]) {background: red;}
tr:hover td[rowspan]:hover ~ td {background: none;}
tr:hover td[rowspan]:hover {background: yellow;}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td >$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td >$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>
I managed to create 'double row' for a table in Bootstrap:
<table class="table table-striped table-bordered">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td rowspan="2">B</td>
<td>B1</td>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
<td>B2</td>
</tr>
</table>
Ideally I want it to look like this:
Playing around with colspan didn't really help, only broke things. I tried to set colspan of every row's first column to 2 and the one of B to 1, and have additional <td> for B1 and B2, didn't work.
Finally I've got a solution for you :
SNIPPET
.container {
background-color: #ccc;
}
thead{
background:#C9E4F4;
}
table,
th,
td {
text-align: center !important;
border: 1.5px solid #929292 !important;
}
#text1 {
background-color: #cac;
}
#text2 {
background-color: #cca;
}
#navigation {
background-color: #acc;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<thead>
<th colspan="2">1</th>
<th>2</th>
<th>3</th>
</thead>
</tr>
<tr>
<td colspan="2">A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td rowspan="2">B</td>
<td>B1</td>
<td>B1</td>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
<td>B2</td>
<td>B2</td>
</tr>
</table>