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>
Related
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>
I want to add a scroll bar when the html table body overflows.I do not want to scroll the table header. I have these html and css codes in my oracle apex page
HTML
<div class="t-Report-wrap">
<div class="t-Report-tableWrap">
<table class="t-Report-report" summary="tab">
<thead>
<tr>
<th class="t-Report-colHead" id="CODE" align="center">Code</th>
<th class="t-Report-colHead" id="HEAD" align="center">Head</th>
</tr>
</thead>
<tbody>
<tr> <td > 5198 </td><td >SUSPENCE </td></tr>
<tr> <td > 1308 </td><td >SHARE IN KNR</td></tr>
<tr> <td > 4803 </td><td >ONE TIME </td></tr>
<tr><td >6021</td><td >NEETHI GOODS </td></tr>
<tr><td >6022</td><td >MANNURE STOCK </td></tr>
<tr><td >4832</td><td >DONATION TO </td></tr>
<tr><td >5218</td><td >CALANDER </td></tr>
<tr><td >4829</td><td >BUILDING TAX </td></tr>
<tr><td >5199</td><td >BICYCLE ADVANCE </td></tr>
<tr><td >2509</td><td >BANK LOAN LT MI(SPL) </td></tr>
</tbody>
</table>
</div>
<div class="t-Report-links"></div>
<table class="t-Report-pagination t-Report-pagination--bottom" role="presentation"></table>
</div>
CSS
.t-Report-wrap {
position: relative;
}
.t-Report-tableWrap {
height:180px;
overflow:auto;
margin-top:20px;
}
.t-Report-tableWrap table {
width:100%;
}
.t-Report-tableWrap table thead th .t-Report-colHead {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:35%;
border:1px solid red;
}
But with this code, the table header is also scrolling. This was referenced from SO answer How to display scroll bar onto a html table. Can anybody help me to find out the error in this code?
Update your th HTML to include a span:
<th id="CODE" align="center"><span class="t-Report-colHead">Code</span></th>
And edit your CSS selectors to remove the repetitive th:
.t-Report-tableWrap table thead .t-Report-colHead
Your code is incorrect as you added an extra space between th and .t-Report-colHead in .t-Report-tableWrap table thead th .t-Report-colHead {
However, here is a working code.
tr{
display: table;
width: 100%;
table-layout: fixed;
}
thead{
display: block;
}
tbody{
display: block;
height: 180px;
overflow: auto;
}
CODEPEN
Hope this helps.
Set height and add overflow:auto; to .t-Report-tableWrap tbody instead of .t-Report-tableWrap so that the scrolling will only effect table body.
.t-Report-wrap {
position: relative;
}
.t-Report-tableWrap {
margin-top:20px;
}
.t-Report-tableWrap table {
width:100%;
}
.t-Report-tableWrap table thead th .t-Report-colHead {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:35%;
border:1px solid red;
}
.t-Report-tableWrap tbody{
height:180px;
overflow:auto;
}
Hope this helps.
Change css code
tbody {
display:block;
height:200px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
t-Report-report {
width:400px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="t-Report-wrap">
<div class="t-Report-tableWrap">
<table class="t-Report-report" summary="tab">
<thead>
<tr>
<th align="center" class="t-Report-colHead" id="CODE">Code</th>
<th align="center" class="t-Report-colHead" id="HEAD">Head</th>
</tr>
</thead>
<tbody>
<tr>
<td>5198</td>
<td>SUSPENCE</td>
</tr>
<tr>
<td>1308</td>
<td>SHARE IN KNR</td>
</tr>
<tr>
<td>4803</td>
<td>ONE TIME</td>
</tr>
<tr>
<td>6021</td>
<td>NEETHI GOODS</td>
</tr>
<tr>
<td>6022</td>
<td>MANNURE STOCK</td>
</tr>
<tr>
<td>4832</td>
<td>DONATION TO</td>
</tr>
<tr>
<td>5218</td>
<td>CALANDER</td>
</tr>
<tr>
<td>4829</td>
<td>BUILDING TAX</td>
</tr>
<tr>
<td>5199</td>
<td>BICYCLE ADVANCE</td>
</tr>
<tr>
<td>2509</td>
<td>BANK LOAN LT MI(SPL)</td>
</tr>
</tbody>
</table>
</div>
<div class="t-Report-links"></div>
<table class="t-Report-pagination t-Report-pagination--bottom" role="presentation"></table>
</div>
</body>
</html>
I think apex has a setup for this, see this example:
Without the setting:
https://apex.oracle.com/pls/apex/f?p=145797:1
With the setting:
https://apex.oracle.com/pls/apex/f?p=145797:12
Go to Report Attributes:
I have this table CSS:
table.show-my-request-table {
border: 1px solid black;
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
}
tr.show-my-request-table-header{
border: 1px solid black;
}
tr.show-my-request-table{
border: 1px solid black;
}
tr.show-my-request-table:hover{
background-color: #D3D3D3;
}
And table HTML:
<table class="show-my-request-table center">
<tr class="show-my-request-table-header">
<th>Date</th>
<th>Priority</th>
<th>Question</th>
</tr>
<tr >
<td class="show-my-request-table"> 11.8.2016 15:27:13
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
</td>
</tr>
<tr >
<td class="show-my-request-table">
11.8.2016 14:45:41
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
Jak se máš?
</td>
</tr>
</table>
I want set up a red background for the first td tag.
My problem is, that I don't know how to do it for only one table.
When I try:
td:first-child {
background-color: #ff0000;
}
it works for all tables.
I think that this code is good, but not working:
table.show-my-request-table > td:first-child {
background-color: #ff0000;
}
Why? How can I do this?
Try this:
table.show-my-request-table tr > td:first-child {
background-color: #ff0000;
}
You don't need to use > (immediate children selector) just put a space
Try this:
table.show-my-request-table td:first-child {
background-color: #ff0000;
}
table.show-my-request-table > td:first-child {
background-color: #ff0000;
}
This selector tries to target a td that is a direct child of the table element. As your own code shows:
<table class="show-my-request-table center">
<!-- snip -->
<tr >
<td class="show-my-request-table">
There is (and has to be) a tr element between them. But that's not all: the HTML parser will also silently insert a tbody element as a parent for the tr (unless you have explicitly included a <thead> or <tbody> tag). The <tbody> tag is optional in HTML, but the element is not, so the parser will simply add the element if the tag is missing.
The solution is to use the descendant selector:
table.show-my-request-table td:first-child {
background-color: #ff0000;
}
A keen observer will notice that the > combinator has been replaced by a (space) combinator.
You just need to target the element inside the table
Try this
table.show-my-request-table tr td:first-child {
background-color: #ff0000;
}
Here's a code pen http://codepen.io/anon/pen/LkrmqK
Cheers and happy coding.
table.show-my-request-table > td:nth-child(1) {
background: #25a3c2;
}
/* grab 2nd row, then color the first cell */
tr:nth-child(2) td:first-child {
background-color: #ff0000;
}
See it in action below
table.show-my-request-table {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}
tr.show-my-request-table-header {
border: 1px solid black;
}
tr.show-my-request-table {
border: 1px solid black;
}
tr.show-my-request-table:hover {
background-color: #D3D3D3;
}
/* grab 2nd row, then color the first cell */
tr:nth-child(2) td:first-child {
background-color: #ff0000;
}
<table class="show-my-request-table center">
<tr class="show-my-request-table-header">
<th>Date</th>
<th>Priority</th>
<th>Question</th>
</tr>
<tr>
<td class="show-my-request-table">
11.8.2016 15:27:13
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
</td>
</tr>
<tr>
<td class="show-my-request-table">
11.8.2016 14:45:41
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
Jak se máš?
</td>
</tr>
I'm trying to get a table to be 100% width of a div...
But when I use width=100% it expands outside of the borders... When using on different devices...
So I'd just like this table, across full width - and the N/A button right aligned...
Seems it is always extending past borders on different devices...
<div class=flist>
<table cellpadding=2 border=1>
<tr>
<td valign=middle>
<img src="images/plus.png" height=14 width=14 border=0 align=middle> <b>General Stuff</b>
</td>
<td align=right>
<input type="button" name="CheckAll" value="All N/A" class=verd8></td>
<td> </td>
</tr>
</table>
</div>
Take this example :
<html>
<body>
<head>
<style>
.flist{
border:1px solid red;
padding:5px;
width:500px;
}
table{
width:100%;
border:1px solid;
}
</style>
</head>
<div class="flist">
<table cellpadding="2" border="1">
<tr>
<td valign=middle>
<b>General Stuff</b>
</td>
<td align=right>
<input type="button" name="CheckAll" value="All N/A" class=verd8></td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
Just an inline css example, but it works if you change .flist width the table width changes, note the red color of the .flist versus black of table.
div.flist{width:500px;}
div.flist table{width:100%;}
This should work in most cases.
if you need mobile, use media queries instead.
Adding 1% each side is = 20px so just minus that from the table width. 1% = 10px;
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
table{
width: 100%;
border-spacing: 0;
border-collapse: collapse;
empty-cells:show;
}
table.bordered{
border-collapse:separate;
border:1px solid #ccc;
border-radius:4px;
}
th,td{
vertical-align:top;
padding:0.5em;
}
tr:nth-child(2n){
background-color:#f5f5f5;
}
-
<table class="bordered">
<tbody></tbody>
</table>
Just write table tag like this
<table width=100%></table>
This might have worked
Added this also into table
style="table-layout:fixed"
.flist {
font-family: Verdana; font-size: 13pt; font-weight: bold;
overflow: hidden;
position: relative;
background-color: #e9e9e9;
padding: 5px;
margin-top: 5px;
margin-left: 1%;
margin-right: 1%;
border: 1px solid #000;
}
.flist > table
{
width: 100%;
}
<div class=flist>
<table cellpadding=2 border=0 style="table-layout:fixed">
<tr>
<td valign=middle>
<b>General</b>
</td>
<td align=right>input type="button" name="CheckAll" value="All N/A" class=verd8></td>
</tr>
</table>
</div>
I want to add a ::before selector on some table cells what has a position:absolute , but it fails:
table{ border:1px solid #ccc; padding:10px; }
table td{ border:1px solid #ccc; padding:5px; }
.useBefore::before{
content:'before';
position:absolute;
}
<table>
<tbody>
<tr>
<td>bird</td>
<td>animal</td>
<td>nature</td>
</tr>
<tr class='useBefore'>
<td>building</td>
<td>robot</td>
<td>city</td>
</tr>
</tbody>
</table>
I noticed that if I add the ::before to all of the tr's then it works:
table{
border:1px solid #ccc;
padding:10px;
}
table td{
border:1px solid #ccc;
padding:5px;
}
tr::before{
content:'before';
position:absolute;
}
<table>
<tbody>
<tr>
<td>bird</td>
<td>animal</td>
<td>nature</td>
</tr>
<tr class='useBefore'>
<td>building</td>
<td>robot</td>
<td>city</td>
</tr>
</tbody>
</table>
But this is not what I want, because I want to add it only on some of them.
I'm not sure why it fails exactly, but you could add it on the first table cell instead.
.useBefore td:first-child:before{
content:'before';
position:absolute;
}