I would like to create a responsive HTML table that wraps columns below itself if the width of the table overflows the container. It should look like this:
And when it's wrapped it schould look like this:
What is the optimal solution to this problem and can it be solved without using javascript?
The table in the default appearance is here:
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
table th,
table td {
border-top: 1px solid #edf2f9;
border-bottom: 1px solid #edf2f9;
padding: 10px;
text-align: left;
}
table th {
background: #f9fbfd;
font-size: 10pt;
text-transform: uppercase;
font-weight: 400;
}
<table>
<thead>
<tr>
<th>First column</th>
<th>Second column</th>
<th>Third column</th>
<th>Fourth column</th>
</tr>
</thead>
<tbody>
<tr>
<td>First column data 1</td>
<td>Second column data 1</td>
<td>Third column data 1</td>
<td>Fourth column data 1</td>
</tr>
<tr>
<td>First column data 2</td>
<td>Second column data 2</td>
<td>Third column data 2</td>
<td>Fourth column data 2</td>
</tr>
<tr>
<td>First column data 3</td>
<td>Second column data 3</td>
<td>Third column data 3</td>
<td>Fourth column data 3</td>
</tr>
</tbody>
</table>
Without scripting, there is only one way out - media queries and set the "display: flex" and "flex-direction: column" properties for the table rows.
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
table th,
table td {
border-top: 1px solid #edf2f9;
border-bottom: 1px solid #edf2f9;
padding: 10px;
text-align: left;
}
table th {
background: #f9fbfd;
font-size: 10pt;
text-transform: uppercase;
font-weight: 400;
}
#media (max-width: 800px) {
tr {
display: flex;
flex-flow: column nowrap;
}
}
<table>
<thead>
<tr>
<th>First column</th>
<th>Second column</th>
<th>Third column</th>
<th>Fourth column</th>
</tr>
</thead>
<tbody>
<tr>
<td>First column data 1</td>
<td>Second column data 1</td>
<td>Third column data 1</td>
<td>Fourth column data 1</td>
</tr>
<tr>
<td>First column data 2</td>
<td>Second column data 2</td>
<td>Third column data 2</td>
<td>Fourth column data 2</td>
</tr>
<tr>
<td>First column data 3</td>
<td>Second column data 3</td>
<td>Third column data 3</td>
<td>Fourth column data 3</td>
</tr>
</tbody>
</table>
This method is not 100% correct and does not completely solve the issue, but there are no other options yet.
Related
I'm making a gantt chart-esqe application using a table as a grid for each of the days. When one of the days is allocated the td will be assigned a class which changes its colour to what resource is being used. I'm trying to put a label on top which shows which resource is allocated like the example below.
table {
table-layout: fixed;
border-collapse: collapse;
width: 100px;
}
td {
height: 20px;
width: 20px;
border: black solid 1px;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
<table>
<tbody>
<tr>
<td class="green">sdfsdfsfsdfs</td>
<td class="green"></td>
<td class="green"></td>
<td class="green"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="green">te</td>
<td class="green"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="red">longstring</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="red">longstring</td>
<td class="red"></td>
<td class="red"></td>
</tr>
</tbody>
</table>
The first two rows which are green work nicely. The label overflowing showing the whole name. I have added a 4th row which does display properly. However the problem comes with the third line. The name is longer than all the days it is allocated so it overflows into the empty tds.
So the only line which doesn't display properly is the 3rd one. The overflow should be hidden so it only display "lon".
Is there any CSS trick which can stop overflowing into an area with a different background/class? Or maybe a javascript solution to prevent overflowing on the last td?
You can use z-index on white cell and assign position static on colored cell to get what you want.
Live demo :
table {
table-layout: fixed;
border-collapse: collapse;
width: 100px;
}
td {
height: 20px;
width: 20px;
border: black solid 1px;
}
td {
z-index: 9;
background-color: white;
position: relative;
}
.green {
position: static;
background-color: green;
}
.red {
position: static;
background-color: red;
}
<table>
<tbody>
<tr>
<td class="green">sdfsdfsfsdfs</td>
<td class="green"></td>
<td class="green"></td>
<td class="green"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="green">te</td>
<td class="green"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="red">longstring</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="red">longstring</td>
<td class="red"></td>
<td class="red"></td>
</tr>
</tbody>
</table>
Note : There is some trouble with border style
I am having a table which is having + and - items for expand and collapse. Onclick of this icons row next to that particular row should expand . I am adding collpasible Icon dynamically through jquery. How can I access next rows dynamically on click of these icons.
Ideally on click of that - icon that expanded row should hide and onclick of + it should be shown.. Thanks in advance
$( document ).ready(function() {
$(".table tbody tr.has-history td:first-child").append('<span class="collapse-icon"></span>');
});
.table tbody tr.has-history > td:first-child {
position: relative;
}
.table tbody tr.has-history span.collapse-icon {
display: inline-block;
width: 20px;
height: 20px;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
left: -20px;
background: #f09d18;
border-radius: 5px 0 0 5px;
cursor: pointer;
font-size: 1.5em;
line-height: 1em;
}
.table tbody tr.has-history span.collapse-icon:before {
content: "+";
}
.table tbody tr.has-history.open span.collapse-icon {
background: #eee;
color: #000;
border: 1px solid #ccc;
}
.table tbody tr.has-history.open span.collapse-icon:before {
content: "-";
}
.table{
MARGIN-LEFT:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<thead>
<tr>
<th>Product</th>
<th>Config</th>
<th>Version</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="has-history open">
<td>MSM8992</td>
<td>Estel</td>
<td>2</td>
<td>Active</td>
</tr>
<tr class="expanded">
<td colspan="4">
<table class="table" >
<thead>
<tr>
<th>Product</th>
<th>Config</th>
<th>Version</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>MSM8994</td>
<td>Elessar</td>
<td>1</td>
<td>Active</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>MSM8994</td>
<td>Elessar</td>
<td>1</td>
<td>Active</td>
</tr>
<tr>
<td>APQ8084</td>
<td>Gandalf - PoP Memory</td>
<td>1</td>
<td>Active</td>
</tr>
<tr class="has-history">
<td>MDM9x40</td>
<td>Tesla</td>
<td>3</td>
<td>Active</td>
</tr>
<tr>
<td>MDM9x45</td>
<td>Spark</td>
<td>1</td>
<td>Active</td>
</tr>
<tr class="has-history">
<td>APQ8084</td>
<td>Gandalf - External Memory</td>
<td>1</td>
<td>Active</td>
</tr>
</tbody>
</table>
Bind click event on collapse-icon class
Toggle next row and icon on click
$(document).on("click", ".collapse-icon", function() {
$(this).parents(".has-history").next().slideToggle();
$(this).parents(".has-history").toggleClass("open");
});
Refer this JSFiddle https://jsfiddle.net/k6kn972b/
Bind click event using event delegation
Then target the current row using $(this).closest("tr")
Then get the next row using .next()
$(document).on("click", ".collapse-icon", function() {
$(this).closest("tr").next().slideToggle();
});
In my table I have a some values in a column that span over multiple rows. When I hover over this value only one row is hilighted (the row containing the actual value). My question is, is there anyway to hilight the other rows when hovering on the value that spans over them ?
here is a code example :
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover{background-color:#f5f5f5}
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td rowspan="2">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td rowspan="2">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
</table>
If your question is about when hovering $100, both Peter and Lois rows should get highlighted then you cannot do it with css alone as per my understanding. You are suppose to go for js scripts.
Check below snippet for reference. Hover on td with rowspan. Hope this helps.
$('.hasRowSpan').hover(function(){
$(this).closest('tr').toggleClass('bg-red');
$(this).closest('tr').next('tr').toggleClass('bg-red');
});
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover{background-color:red}
.bg-red{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td class="hasRowSpan" rowspan="2">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td class="hasRowSpan" rowspan="2">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
</table>
Update: You can use nextAll() when rowspan has more than 2 rows.
Find below updated snippet as per your comment.
$('tr').hover(function() {
if ($(this).find('td').hasClass('hasRowSpan')) {
$(this).next('tr').toggleClass('bg-red');
}
if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) {
$(this).prev('tr').toggleClass('bg-red');
}
});
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: red
}
.bg-red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td class="hasRowSpan" rowspan="2">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>David</td>
<td>Rijo</td>
<td>$500</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td class="hasRowSpan" rowspan="2">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
</table>
Update 1: I just updated the script as per your comment here. Note: Am sure this won't be working if you have rowspan more than 2.
$('.hasRowSpan').hover(function() {
$(this).closest('tr').toggleClass('bg-red');
$(this).closest('tr').next('tr').toggleClass('bg-red');
});
$('tr').hover(function() {
if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) {
$(this).prev('tr').find('td.hasRowSpan').toggleClass('bg-red');
}
});
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: red
}
.bg-red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td class="hasRowSpan" rowspan="2">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>David</td>
<td>Rijo</td>
<td>$500</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td class="hasRowSpan" rowspan="2">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
</table>
Update 2: Check above snippet, I have changed my code as per your desired output.
<!DOCTYPE html>
<html>
<body>
<table border="1" style="width:100%">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>10</td>
<td>10</td>
</tr>
</table>
</body>
</html>
The above html data provides a table which has corresponding rows and columns. I want a format in which lines between rows should be hidden only column lines and table border lines should be visible . Hope my question is clear now . I want to create a table where lines between rows should be hidden
You can use the following css:
JSFIDDLE https://jsfiddle.net/seadonk/uf37xzqh/3/
HTML
<table id="thetable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
</table>
CSS
#thetable {
border: 2px solid gray;
background: lightgray;
border-spacing: 0px;
border-collapse: collapse;
}
#thetable td{
border-right: 2px solid gray;
padding: 20px;
}
You need to set the css properties border and border-collapse on your table tag and set the right border for your td.
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
td {
border-right: 1px solid black;
text-align: center;
padding: 5px;
}
<table>
<tr>
<td> a </td>
<td> b </td>
</tr>
<tr>
<td> c </td>
<td> d </td>
</tr>
</table>
<table frame="box" rules="cols">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
try this
JsFieddle
HTML
<table style='border:solid' cellpadding="10" cellspacing="0">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
css
td{border-right:solid}
Please consider the following (http://jsfiddle.net/HaLGr/11/):
.head_row {
color: #FFFFFF;
background-color: #5D7B9D;
}
.row_one {
font-size: 12px;
}
.row_two {
font-size: 12px;
display: none;
}
.row_three {
font-size: 12px;
display: block;
}
<table name="main_table" id="main_tbl">
<tr>
<td class="head_row">Column 1</td>
<td class="head_row">Column 2</td>
</tr>
<tr class="row_one">
<td>Row One</td>
<td>Row One</td>
</tr>
<tr class="row_two">
<td>Row Two</td>
<td>Row Two</td>
</tr>
<tr class="row_three">
<td>Row Three</td>
<td>Row Three</td>
</tr>
</table>
Why are the cells in third row misaligned when using display: block ?
I need to be able to hide (display: none) and show (display: block) the table rows with the correct column alignment.
By default, rows have display: table-row; set by the browser style sheet. And apparently it is quite different from display: block.
What you should instead do in your CSS is:
.row_three {
font-size: 12px;
display: table-row;
}
Don't use "display: block" with a table. I would say, do not use tables at all for what you are doing, try working with DIVs.