I have two tables. One for header and other for the body. I created it this way so that header will remain fixed if the body overflows.
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
.scroll-example {
display: block;
margin-right: 20px;
width: 100%;
}
td {
border: 1px solid black;
min-width: 100px;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td:hover i {
display: block;
float: right;
visibility: visible;
}
i {
display: none;
visibility: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow: hidden;width: 400px;">
<table id="target" class="scroll-example" style="overflow: hidden;">
<tr>
<td class="col1">HHHHHHHHHHHHH</td>
<td class="col2">HHHHHHHHHHH</td>
<td class="col3">HHHHHHHHHHH</td>
<td class="col4">HHHHHHHHHHH</td>
<td class="col5">HHHHHHHHHHH</td>
<td class="col6">HHHHHHHHHHH</td>
<td class="col7" width="20px" style="border-color: white;"></td>
</tr>
</table>
<table id="source" class="scroll-example" style="overflow: scroll;height: 50px;">
<tr>
<td class="col1"><i class="fa fa-pencil"></i>AAAAAAAAAAA</td>
<td class="col2"><i class="fa fa-pencil" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-pencil" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
</tr>
</table>
</div>
Now I am looking for resizing the columns dynamically. So when the user resizes the top table column it should resize the corresponding bottom cell column.
I tried td{resize: horizontal;} but it is not working and I guess that is because of td{min-width:100px;max-width:100px;}.
Is there a way to achieve the column resizing in this table?
I am a beginner with CSS and jQuery. It would be of great help if you could put an example code. Thanks you.
Sample:
I have dragged 'Account Name' column and when I release it, the column width is set.
Ive searched a lot for my own table widget. You need 2 Tables in each of them a colgroup with col´s they have to match your table column count. Ive created a fiddle i hope it´s clear enough. The two col´s of the Tables needs to be synced on your jquery resize functionality.
.head{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
.body{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
<table class="head">
<colgroup>
<col width="100px"> <!-- Our resized column -->
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>#</td>
<td>From</td>
<td>Subject</td>
</tr>
</tbody>
</table>
<table class="body">
<colgroup>
<col width="100px"> <!-- Our resized column -->
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>00001</td>
<td>Mister Exmple</td>
<td>Problems with sharing</td>
</tr>
<tr>
<td>00002</td>
<td>Mister Example 02</td>
<td>Ouh is this a subject?</td>
</tr>
<tr>
<td>00003</td>
<td>Mistr Default</td>
<td>Yo whats up</td>
</tr>
</tbody>
</table>
Related
First of all I would like you to know that before I make a post here I read a lot about this subject but still can't apply the idea so this post is after long time of searching...
This is HTML Code
<!DOCTYPE html>
<html>
<head>
<title>test₺</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid" style="margin: 0; padding: 0;">
<nav style="height: 30px; width: 100%; background-color: dodgerblue"></nav>
</div>
<div class="container">
<div class="row">
<div class="menu col-sm-6">
<div class="mealType burger">
<div class="categoryTitle">Burger</div>
<div class="categoryContent" id="burger">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Chicken Burger</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fish Burger</td>
<td>15<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Barbeque</td>
<td>12<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
<div class="mealType seaFood">
<div class="categoryTitle">Sea Food</div>
<div class="categoryContent" id="seaFood">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fish Sliece</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fillet Fish</td>
<td>25<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td class="add">0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Hamour Fish</td>
<td>40<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
<div class="mealType steak">
<div class="categoryTitle">Steak</div>
<div class="categoryContent" id="seaFood">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Chicken Steak</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Beef Steak</td>
<td>25<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
</div>
<div class="myCart col-sm-6">
<div class="myCartContaier">
<div class="myCartTitle">My Cart</div>
<div class="myCartDetails">
<table></table>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Javascript jQuery Code
'use strict';
// Start Remove the ability to select //
$(".mealType, .categoryTitle, .categoryContent, .table").attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
// End Remove the ability to select //
$(function(){
$('.categoryTitle').on('click', function(){
var $this = $(this);
$this.next('div').slideToggle(200);
});
$('.add').on('click', function(){
var $this = $(this),
$elementToClone = $this.parent(),
$myCartDetails = $this.parent().parent().parent().parent().parent().parent().next().children().children().next().children();
if ($myCartDetails.children().hasClass('addCloned')) {
$($myCartDetails.children()).removeClass('addCLoned').detach();
} else {
$elementToClone.clone(true,true).appendTo($myCartDetails).addClass('addCloned');
}
});
});
CSS code if needed
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.menu {
background-color: white;
width: 200px;
}
.mealType {
background-color: red;
width: 400px;
margin: 0 auto;
box-shadow: 1px 1px 10px silver;
}
.menu, .myCart {
margin-top:0rem;
padding: 10px;
}
.categoryTitle {
background-color: dodgerblue;
width: 400px;
margin: 0 auto;
margin-top: 20px;
padding: 5px;
color: white;
font-weight: bold;
font-family: Calibri, sans-serif, Tahoma, Arial;
font-size: 18px;
text-shadow: 1px 1px 2px black;
cursor: pointer;
}
.categoryContent {
display: none;
}
.categoryTitle, .myCartTitle {
text-align: center;
}
table {
margin: 0 auto;
width: 400px;
}
table tr {
border-bottom: 1px solid silver;
}
table tr:nth-child(even) {
background-color: white;
}
table tr:nth-child(odd) {
background-color: #EEE;
}
table td {
padding: 5px 10px;
text-align: center;
color: black;
font-family: Calibri, sans-serif, Tahoma, Arial;
}
td img {
width: 30px;
}
table tr td:nth-of-type(4),table tr td:nth-of-type(5) {
cursor: pointer;
}
the idea is Add to cart by javascript I tried the clone with the argument (true,true) but still I am not able to apply the idea that I want I tried a lot of things but I am really unable to apply the idea that I want so I posted in stackoverflow hopefully there's a hero will guide me to the right way to apply like this idea and I really appreciate his effort I am waiting for you guys thanks a lot.
Click To See Simple Image Of The Idea
$myCartDetails = $this.parent().parent().parent().parent().parent().parent().next().children().children().next().children();
You really need to go back and learn the fundamental concepts of javascript, html, and css before you even try to make a cart.
This is my situation: I have a table with table header position: fixed and a couple of table body rows with their width set to 100%.
I am trying to make the header row resize properly when browser resizes, so its cells lines up body row cells.
How am I going to achieve that? (trying to make a position: fixed element react to browser size-change dynamically)
Here is my code. A very simple webpage
<html>
<head>
<style>
body{
width:100%;
}
thead{
position:fixed;
width:100%
overflow:visible;
align:center;
}
th{
border:2px solid black;
width:20%;
text-align:center;
}
td{
border:2px solid black;
width:20%;
text-align:center;
}
table{
width:80%;
margin:auto;
margin-top:50px;
}
.empty{
height:30px;
}
.empty td{
border:none;
}
</style>
</head>
<body>
<table>
<thead>
<th>
heading1;
</th>
<th>
heading2;
</th>
<th>
heading3;
</th>
<th>
heading4;
</th>
<th>
heading5;
</th>
<thead>
<tbody>
<tr class="empty">
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>
cell1;
</td>
<td>
cell2;
</td>
<td>
cell3;
</td>
<td>
cell4;
</td>
<td>
cell5;
</td>
</tr>
<tr>
<td>
cell1;
</td>
<td>
cell2;
</td>
<td>
cell3;
</td>
<td>
cell4;
</td>
<td>
cell5;
</td>
</tr>
<tbody>
</table>
</body>
</html>
I'm developing a website tool using ASP.net currently. Any solution in ASP.net will be much appreciated.
The table element is not quite flexible as other in the html. Aparently the 'position:fixed' property will make the table ignore the width specification.
Therefore I tweaked your html and css a bit, in order to better divide the document's parts into header and content (section).
Basically, the header will contain only the table head.
The section will contain all the table rows and data in it. When scrolling, the header element will remain fixed and the table head cells in it (which has been given the exact same css attributes as the td cells) will remain perfectly aligned with their respective columns.
Hope this helps, good luck.
body {
width: 100%;
margin: 0px;
}
header {
width: 100%;
position: fixed;
margin-top: -30px;
}
section {
width: 100%;
margin-top: 50px;
}
table {
width: 80%;
margin: 0px auto;
}
header table th,
section table td {
width: 20%;
text-align: center;
border: 2px solid black;
}
<header>
<table>
<thead>
<th>heading1;</th>
<th>heading2;</th>
<th>heading3;</th>
<th>heading4;</th>
<th>heading5;</th>
</thead>
</table>
</header>
<section>
<table>
<tbody>
<tr>
<td>cell1;</td>
<td>cell2;</td>
<td>cell3;</td>
<td>cell4;</td>
<td>cell5;</td>
</tr>
<tr>
<td>cell1;</td>
<td>cell2;</td>
<td>cell3;</td>
<td>cell4;</td>
<td>cell5;</td>
</tr>
</tbody>
</table>
</section>
I have a header bar with left-aligned items, center items and right-aligned items. In the center, I have multiple items and a search input field. When the search field gets focus, I'm making it wider by animating the width. Right now, because the items are centered, it's animating both left and right to center the content. How can I change this so it keeps the alignment and expands the width to the right?
I'm not using Bootstrap.
I'm currently using a table for the header bar content. I'm open to changing that, but if there's a way to do it with the current design, that would be preferred.
Here's a JSFiddle...click in the search field to see what's happening: https://jsfiddle.net/L60g0j64/1/
EDIT: I've updated it with the suggested solution below. My only issue is that the red container surrounding the input should expand also.
HTML/CSS/JS Snippet
$('#search').focus(function() {
$(this).val("");
$('#hidden_content').css('display','inline');
$(this).animate({width: '180px'}, 200);
});
$('#search').blur(function() {
$(this).val('Search');
$('#hidden_content').css('display','none');
$(this).animate({width: '120px'}, 200);
});
.header-navbar {
cursor: pointer;
white-space: nowrap;
background-color: #1f2127;
color: #cbcbcb;
min-width: 0;
text-overflow: ellipsis;
z-index: 299;
top: 0px;
left: 0px;
width: 100%;
height: 32px;
float: none;
position: fixed;
border-spacing: 0px;
}
td.cell-center {
text-align: center;
}
.cell-center table {
margin: 0 auto;
}
.header-table {
height: 32px;
border: none;
border-spacing: 0px;
}
td.header_rtd {
padding-right:12px;
}
td.header_ltd {
padding-left:12px;
}
.search-wrapper {
max-width: 124px;
background-color: red;
padding:4px;
}
.hidden_content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="header-navbar" id="header" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_rtd'>left1</td>
<td class='header_rtd'>left2</td>
</tr>
</table>
</td>
<td width=100% class='cell-center'>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_rtd'>center</td>
<td class='header_rtd'>center</td>
<td><div class="search-wrapper">
<input class="search" id="search" style="width: 120px;" type="text" size="60" value="Search"/>
<div class='hidden_content' id='hidden_content'>
hidden content
</div>
</div></td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_ltd'>right1</td>
<td class='header_ltd'>right2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
One quick solution would be to give the parent element a max-width equal to the initial width of the element. In doing so, the element will still be centered relative to the initial width because the input element's animated width will not effect the width of the parent element.
Updated Example
.search-wrapper {
max-width: 124px;
}
As a side note, you don't need jQuery/JS to animate the width, you can simply use a CSS transition along with the :focus pseudo-class.
Updated Example
.search-wrapper input.search {
transition: 1s width ease;
width: 120px;
}
.search-wrapper input.search:focus {
width: 180px;
}
Please suggest how can i lock the headers in the table not to scroll. Find the sample code : http://jsfiddle.net/7t9qkLc0/14/ .
I want to lock Column1 and Column2 header so that when we scroll down to view the data the table headers are still visible.Thanks in advance.
My html code:
<div id="test" style="float: left; border: 0px solid #99ffff;">
<table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 20px;">
<tr>
<td>
<table cellpadding="2px" cellspacing="2px" style="border: 2px solid #657383; margin-bottom: 15px;" width="300px">
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
<table width="300px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
</table></td></tr>
</table>
</td>
</tr>
</table>
</div>
You have to put your header in a seperate table and put a fixed position on it. Take a look at this.
http://jsfiddle.net/7t9qkLc0/47/
<table width="290px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</table>
<table style="margin-top:25px">
<tr> ....
Try it like this:
Changed this in the HTML:
<th>Column1
<div>Column111</div>
</th>
<th>Column2
<div>Column222</div>
</th>
(The divs are new)
And add this CSS:
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: blue;
color: #fff;
padding: 9px 25px;
top: 0;
line-height: normal;
border-left: 1px solid #800;
}
NOTE: The css is a little bit rough, but with a little bit styling it will look better
FIDDLE
Another way is to separate the headerline from the table and make them 2 elements.
you could assign the position:fixed; attribute to the th style and then style it to fit in with the table so positioning and overlapping is correct.
th {
position: fixed;
}
I also just found this link that answers your question http://jsfiddle.net/T9Bhm/7/
I'm trying to set up a page that looks like the image below.
http://i.stack.imgur.com/GwRXf.png
I would like to have the main image replaced when I "hover" on one of the links listed nearby (a table or a list) disabling the "click" behavior.
I have tried to do this with css following this code:
http://jsfiddle.net/Kne3d/5/
I tried to change it in this way:
#gallery {
oveflow: auto;
text-align: center;
padding: 1em;
padding-top: 120px;
position: relative;
}
#gallery td {
display: inline;
padding: 0 1em;
}
#gallery img {
display: none;
position: absolute;
top: 10px;
left: 35%;
}
#gallery td:hover {
background: yellow;
}
#gallery td:hover ~ img {
display: block;
}
and:
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="gallery">
<tr>
<td width="100%">Cat 1<img src="/images/01.png"></td>
<td width="150" rowspan="6">I WANT MY IMAGES HERE</td>
</tr>
<tr>
<td>Cat 2 <img src="/images/02.png"></td>
</tr>
<tr>
<td>Cat 3 <img src="/images/03.png"></td>
</tr>
<tr>
<td>Cat 4<img src="/images/04.png">
</td>
</tr>
</table>
I'd like my images will show up on the right column...
I also tried with Javascript:
<head>
<script language="JavaScript" type="text/JavaScript">
function showT(q){
document.getElementById('ima').setAttribute('src','0'+q+'.png')
}
</script>
</head>
<body>
<table width="100%" border="0">
<tr>
<td width="80%"><p>• Image 1</p>
<p>Image 2</p>
<p>Image 3</p>
<p>Image 4</p>
<td width="20%"><img id="ima" src="images/00.png" width="150" height="150">
</td>
</tr>
</table>
</body>
but...without success: images doesn't show up :(
Any idea on how make it works?
A really simple way:
$('#nav').find('li').hover(function(){
$('#gallery').find('li').eq($(this).index()).toggle();
});
demo