I have HTML table with scroll. On cell clicking, one custom component opens. Want to scroll that custom component also.
jsfiddle Link:: https://jsfiddle.net/rujz69nq/4/
The expected result is that custom component should open over the table. so when clicking on the last row it will not take extra space inside the table.
Any Help?
$(document).ready(function () {
$("#test").click(
function () {
appendContainer();
}
);
});
function appendContainer() {
$('#test').after("<div class='floatContainer'><div>test1</div></br><div>test2</div></br><div>test3</div></br><div>test4</div> </div>");
}
$(document).mouseup(function(e)
{
var container = $("#test");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
$('.floatContainer').hide();
}
});
table, th, td {
border: 1px solid black;
padding:5px;
}
.positionRelative {
position:relative;
background-color: yellow;
}
.floatContainer{
position: absolute;
background-color: red;
margin: 5px;
padding: 0 5px;
height:60px;
overflow-y : scroll;
}
#container{
border: 1px solid blue;
height: 100px;
overflow-y:scroll;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<h2>Test table:</h2>
<div id="container">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td class="positionRelative">
<div>
<div id="test"> test
</div>
</div>
</td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
</div>
</body>
</html>
Related
table, th, td, div {
font-family: Arial;
padding: 1em;
border-style: solid;
border-collapse: collapse;
text-align: center;
}
div {
writing-mode: vertical-rl;
background-color: #ddd;
border-color: #bbb;
}
<table>
<tr>
<td>one</td> <td>two</td> <td>three</td>
</tr>
<tr>
<td rowspan="2"> <div>four</div> </td>
<td>five</td> <td>six</td>
</tr>
<tr>
<td>seven</td> <td>eight</td>
</tr>
</table>
The desired result is for the div in the table cell to look more like
this:
Notice the "four" div fills the entire width and height of the table cell in the image but not in the code snippet.
There are questions similar to this that suggest using absolute positioning which doesn't work in this exact situation ( per my attempts ) on a table with unspecified width and height. Other answers say there is no way to do this without JavaScript. But those answers were from 2010. Any input would be much appreciated.
if you are okay with a few classes then you can achieve what you shown in the image.
table,
th,
td,
div {
font-family: Arial;
padding: 1em;
border-style: solid;
border-collapse: collapse;
text-align: center;
}
.spl {
writing-mode: vertical-rl;
border-style: none;
}
.inb {
background-color: #ddd;
}
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td rowspan="2" class="inb">
<div class="spl">four</div>
</td>
<td>five</td>
<td>six</td>
</tr>
<tr>
<td>seven</td>
<td>eight</td>
</tr>
</table>
You could use jQuery as follows to get the (outer) width and height of that parent td and apply it to that div
$(document).ready(function() {
var cellwidth1 = $('.x1').outerWidth();
var cellheight1 = $('.x1').outerHeight();
$('.x2').css({
'height': cellheight1,
'width': cellwidth1
});
});
* {
box-sizing: border-box;
}
table, th, td, div {
font-family: Arial;
padding: 1em;
border-style: solid;
border-collapse: collapse;
text-align: center;
}
td.x1 {
padding: 0;
}
div.x2 {
writing-mode: vertical-rl;
background-color: #ddd;
border-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>one</td> <td>two</td> <td>three</td>
</tr>
<tr>
<td class="x1" rowspan="2"> <div class="x2" >four</div> </td>
<td>five</td> <td>six</td>
</tr>
<tr>
<td>seven</td> <td>eight</td>
</tr>
</table>
After trying many things it seems that as of 2020 stretching a div to fill all the available space of a table cell without JavaScript is not possible unless you use absolute/relative positioning.
The downside with absolute positioning is that the cell does not expand with the content inside it and even not expanded the table cell seems to break on mobile ( tested with an iphoneXS on IOS14 )
dev-sbx.github.io/x
The only real solution here seems to be using a CSS Grid layout opposed to an HTML table.
I have a textarea in the td cell of each row in column 3, to hold description specific to each row.
When the user clicks on the td, the current description in the textarea inside the td should be copied over to the textarea inside #div_toggle
Here is what I am trying to accomplish.
The user would make changes to the description in #div_toggle, and when done, will click 'X' to close the div. This should cause the contents to be transferred from the textarea in #div_toggle to the td cell textarea.
Would you be able to help me achieve this goal? Or am I complicating this? Is there a better approach?
Below is the code I have thus far, but it does not work as desired or described above. Please help.
Best regards.
<!DOCTYPE html>
<html>
<head>
<style>
th,
td {
border: solid 1px lightgrey;
}
#div_toggle {
display: none;
border: 1px solid black;
margin: 10px;
}
#div_toggle textarea {
width: 200px;
height: 150px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
}
#close_text {
position: absolute;
right: 27px;
cursor: pointer;
padding: 5px;
background: #cfd0d1;
border-radius: 4px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function() {
//Show textarea
$('.cell_id').click(function() {
$('#div_toggle').slideToggle('slow');
});
//Close textarea
$('#close_text').click(function() {
var tbl = $('#itemtable');
var rows = $('tr', tbl);
//get toggle div text area contents into td cell textarea
rows.eq(clickedrowindex).find('td:nth-child(3)').text() = $('#div_toggle textarea#notescopy').val();
$('#div_toggle').slideToggle('slow');
});
var clickedrowindex;
$('#itemtable').find('tr').click( function(){
clickedrowindex = $(this).closest('tr').index();
//get td cell textarea contents into the toggle div text area
var notestext = $(this).find('td:nth-child(3)').text();
$('#div_toggle textarea#notescopy').val(notestext);
});
});
</script>
</head>
<body>
<div class="left" style="margin-top:5px; border: solid #666 1px;">
<table id="itemtable" class="" style="width: 300px; margin: 10px;">
<thead style="color:black;">
<tr>
<th>Year</th>
<th>Model</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td> 2013</td>
<td> Toyota</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
<tr>
<td> 2001</td>
<td> Honda</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
</tbody>
</table>
<div id="div_toggle"><textarea id='notescopy'></textarea>
<span id="close_text" title="Click to close">X</span>
</div>
</div>
</body>
</html>
You do not need that much of code and its can simplified to just two functions to achieve your desired results.
Firstly, we just need to make sure that we save the our current target (td > textarea) in variable and use that variable to assign val to the textarea accordingly.
Also, we need to use a class .div_toggle selector not an id #div_toggle - Since id will only pick the element which is found firstly but in our case we need to change value dynamically on each slideDown and SlideUp event.
Lastly, for this you need to use slideDown and slideUp on X button click. Its work the same way as slideToggle. Using slideToggle will create a weird behaviour.
When you click the X the content you typed in the toggle div textarea will be transfered to the td you clicked on as your target
Live Working Demo:
$(document).ready(function() {
let currentTar; //save current target
let divToggle = $('.div_toggle') //get element
//Show textarea
$('.cell_id').click(function(event) {
currentTar = event.currentTarget
divToggle.slideDown('slow');
let getText = $(this).find('textarea').val()
divToggle.find('textarea').val(getText)
});
//Close textarea
$('#close_text').click(function() {
divToggle.slideUp('slow');
let assignVal = divToggle.find('textarea').val();
$(currentTar).find('textarea').val(assignVal)
});
});
th,
td {
border: solid 1px lightgrey;
}
.div_toggle {
display: none;
border: 1px solid black;
margin: 10px;
}
.div_toggle textarea {
width: 200px;
height: 150px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
}
#close_text {
position: absolute;
right: 27px;
cursor: pointer;
padding: 5px;
background: #cfd0d1;
border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="left" style="margin-top:5px; border: solid #666 1px;">
<table id="itemtable" class="" style="width: 300px; margin: 10px;">
<thead style="color:black;">
<tr>
<th>Year</th>
<th>Model</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td> 2013</td>
<td> Toyota</td>
<td class='cell_id'><textarea name='reqnotes'>Test</textarea></td>
</tr>
<tr>
<td> 2001</td>
<td> Honda</td>
<td class='cell_id'><textarea name='reqnotes'>Foo</textarea></td>
</tr>
<tr>
<td> 2040</td>
<td> Elon Musk</td>
<td class='cell_id'><textarea name='reqnotes'>Tesla</textarea>
</td>
</tr>
</tbody>
</table>
<div class="div_toggle"><textarea id='notescopy'></textarea>
<span id="close_text" title="Click to close">X</span>
</div>
</div>
</body>
A few minor changes. Utilize $(this).val() instead of doing a find for the closest :)
You'll notice the code is much cleaner as well.
$(document).ready(function() {
$("textarea").click(function(){
var contents = $(this).val();
$('#notescopy').val(contents);
});
//Show textarea
$('.cell_id').click(function() {
$('#div_toggle').slideToggle('slow');
});
//Close textarea
$('#close_text').click(function() {
$('#div_toggle').slideToggle('slow');
});
});
th,
td {
border: solid 1px lightgrey;
}
#div_toggle {
display: none;
border: 1px solid black;
margin: 10px;
}
#div_toggle textarea {
width: 200px;
height: 150px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
}
#close_text {
position: absolute;
right: 27px;
cursor: pointer;
padding: 5px;
background: #cfd0d1;
border-radius: 4px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div class="left" style="margin-top:5px; border: solid #666 1px;">
<table id="itemtable" class="" style="width: 300px; margin: 10px;">
<thead style="color:black;">
<tr>
<th>Year</th>
<th>Model</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td> 2013</td>
<td> Toyota</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
<tr>
<td> 2001</td>
<td> Honda</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
</tbody>
</table>
<div id="div_toggle"><textarea id='notescopy'></textarea>
<span id="close_text" title="Click to close">X</span>
</div>
</div>
</body>
</html>
I have code similar to this situation:
table {
table-layout: auto;
background-color: tomato;
border: 1 solid black;
}
.table-wrapper {
display: inline-block;
}
.tabs {
background-color: #00bcd4;
}
<div>
<div class="tabs">
smth
</div>
<div class="table-wrapper">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Sample</th>
<th>Sample</th>
<th>Sample</th>
</tr>
<tr>
<td>Jill31222222</td>
<td>Smith12333333333333</td>
<td>5031231231231232</td>
<td>Jill31231231231</td>
<td>Smith312312312312</td>
<td>50312312312312312</td>
</tr>
<tr>
<td>Eve12312312312</td>
<td>Jackson1233123123123123312</td>
<td>94312312312312</td>
<td>Jill312312312312</td>
<td>Smith312312312</td>
<td>5031233123123123</td>
</tr>
</table>
</div>
</div>
I have a table with table-layot: auto style, which cells display very large text. Above table are displayed tabs. After horizontal scrolling tabs div is cut.
Is there a possibility to stretch tabs div, depending on table's width?
Relevant image:
A div (or any element with display:block) is only as wide as its container.
So one solution is to put it in a container that is as wide as the table. For instance, an inline-block around the table, which will stretch itself to the correct width.
.div-and-table-wrapper {
display:inline-block;
min-width:100%;
}
table {
table-layout: auto;
background-color: tomato;
border: 1 solid black;
}
.table-wrapper {
display: inline-block;
}
.tabs {
background-color: #00bcd4;
}
<div class="div-and-table-wrapper">
<div class="tabs">
smth
</div>
<div class="table-wrapper">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Sample</th>
<th>Sample</th>
<th>Sample</th>
</tr>
<tr>
<td>Jill31222222</td>
<td>Smith12333333333333</td>
<td>5031231231231232</td>
<td>Jill31231231231</td>
<td>Smith312312312312</td>
<td>50312312312312312</td>
</tr>
<tr>
<td>Eve12312312312</td>
<td>Jackson1233123123123123312</td>
<td>94312312312312</td>
<td>Jill312312312312</td>
<td>Smith312312312</td>
<td>5031233123123123</td>
</tr>
</table>
</div>
</div>
(Note: the min-width is in there to ensure that the tabs div will be at least as wide as the window in case the table is narrower.
If you don't want that, i.e. if you want the tabs div to always be the same width as the table, perhaps you're better off turning it into a caption.)
You need to set the width of the parent div to fit-content:
table {
table-layout: auto;
background-color: tomato;
border: 1 solid black;
}
.table-wrapper {
display: inline-block;
}
.tabs {
background-color: #00bcd4;
}
.tabs-wrapper {
width: fit-content;
}
<div class="tabs-wrapper">
<div class="tabs">
smth
</div>
<div class="table-wrapper">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Sample</th>
<th>Sample</th>
<th>Sample</th>
</tr>
<tr>
<td>Jill31222222</td>
<td>Smith12333333333333</td>
<td>5031231231231232</td>
<td>Jill31231231231</td>
<td>Smith312312312312</td>
<td>50312312312312312</td>
</tr>
<tr>
<td>Eve12312312312</td>
<td>Jackson1233123123123123312</td>
<td>94312312312312</td>
<td>Jill312312312312</td>
<td>Smith312312312</td>
<td>5031233123123123</td>
</tr>
</table>
</div>
</div>
An alternative would be, as Mr Lister already suggested, using inline-block instead of fit-content.
So I have researched making tr's and td's linkable and have been using the onclick method for the entire row. Is there a way to make 2 td's link to one page and 2 link to another?
function x() {
window.location.href = 'x.com';
}
function y() {
window.location.href = 'y.com';
}
table {
width: 100%;
height: 100px;
border: 1px solid;
}
td {
border: 1px solid;
}
.x:hover {
background-color: red;
}
.y:hover {
background-color: blue;
}
<table>
<tr>
<td class="x" onclick="javascript:x"></td>
<!--I want these 2 td to be the same link-->
<td class="x" onclick="javascript:x"></td>
<td class="y" onclick="javascript:y"></td>
<!--and this one be a different link-->
</tr>
<tr>
<td class="x" colspan="2" onclick="javascript:x"></td>
<!--so it looks like this but 2 cells are enclosed in the same link-->
<td class="y" onclick="javascript:x"></td>
</tr>
</table>
LINK HOVER EFFECTS BY CLASS
$('.x').hover(function () {
$('.x').toggleClass('active');
});
table{
width:100%;
height:100px;
border:1px solid;
}
td{
border:1px solid;
}
.x:hover,
.active{
background-color:red;
}
.y:hover{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="x"></td> <!--I want these 2 td to be the same link-->
<td class="x"></td>
<td class="y"></td> <!--and this one be a different link-->
</tr>
</table>
WITH PURE CSS (IF CLASS IS SIBLING)
table{
width:100%;
height:100px;
border:1px solid;
}
td{
border:1px solid;
}
.x:hover,
.x:hover ~ .x{
background-color:red;
}
.y:hover{
background-color:blue;
}
<table>
<tr>
<td class="x"></td> <!--I want these 2 td to be the same link-->
<td class="x"></td>
<td class="y"></td> <!--and this one be a different link-->
</tr>
</table>
How can I?
Given the html coding below, how can I 1.) Lock the first row (table headers) from scrolling and 2.) Have an inner table border of 1px solid #cccccc
Thanks for all your help!
Jay
Style Coding:
<style type="text/css">
div#data_container {
width: 800px;
height: 75px;
overflow: auto;
border: 1px solid #cccccc;
}
table#data_tbl {
border-collapse: collapse;
table-layout: fixed;
}
table#data_tbl td {
border: 0px;
}
table#data_tbl tr:first-child td {
color: #235A81;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
}
</style>
Body:
<!-- START OF DATA CONTAINER -->
<div id="data_container">
<table id="data_tbl">
<td>File Number</td>
<td>Date Received</td>
<td>Request Type</td>
<td>Name</td>
<tr>
<td>12345678</td>
<td>08/01/2013</td>
<td>Billing</td>
<td>Joe Smith</td>
</tr>
<tr>
<td>09876543</td>
<td>09/01/2013</td>
<td>Technical</td>
<td>Nancy Edwards</td>
</tr>
<tr>
<td>11223344</td>
<td>10/01/2013</td>
<td>Operations</td>
<td>Jill White</td>
</tr>
<tr>
<td>45678931</td>
<td>12/01/2013</td>
<td>Billing</td>
<td>Michael Burns</td>
</tr>
<tr>
<td>85239975</td>
<td>09/01/2013</td>
<td>Support</td>
<td>Debbie Stewart</td>
</tr>
<tr>
<td>55667788</td>
<td>11/01/2013</td>
<td>Administrative</td>
<td>David Adams</td>
</tr>
</table>
</div>
<!-- END OF DATA CONTAINER -->
Easiest way is to use 3rd party plugin. check this out: http://dlippman.imathas.com/projects/tablescroller.php or try datatables.net
Style table for borders:
table {
position: relative;
}
table, th, td {
border: 1px solid #cccccc;
}
You can set style="overflow:hidden" on th tag when box appears. It will lock mouse scroll or use position:fixed on a box.