I have a html table. In the table on a particular condition i need to strike out the row, the issue is while i am able to overlap the image over normal cells the textboxes come over the strikeout line.
Below code:
<tr class="strikeout" style="/background: transparent url('c:/img/strike.png') 0 50% repeat-x;z-index: 999999999999999999999;position: relative;">
Image :
A background such as you have cannot overlay content.
I'd suggest using a positioned pseudo-element on the td in your selected row*.
*You cannot position absolutely in relation to a tr.
So something like this:
table {
table-layout: fixed;
}
td {
position: relative;
text-align: center;
}
.strikeout td:after {
content: "";
position: absolute;
width: 100%;
height: 6px;
top: 50%;
left: 0;
transform: translateY(-50%);
background: red;
z-index: 1
}
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="strikeout">
<td><input type="text"></td>
<td><button>button</button></td>
<td>
<select name="" id="">
<option value="">Option1</option>
<option value="">Option2</option>
<option value="">Option3</option>
</select>
</td>
</tr>
<tr>
<td>John</td>
<td><button>Button</button></td>
<td>80</td>
</tr>
</table>
Related
I'm working on a table and I am trying to make it so if you click anywhere on a row, including blank spaces, then the corresponding checkbox will be selected. I tried putting a <label> before/after the <tr> tag, but that did not seem to work at all. Next, I tried making the contents of each <td> as a label, which works fine, except if you click the blank space on the row between the text then nothing happens.
How can I make the entire row selectable?
body {margin: 0; background-color: #F2F2F2;}
.topbar {
z-index: 10;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 56px;
font-size: x-large;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
#bottombar {
position: fixed;
width: 100vw; height: 60px;
bottom: 0; left: 0;
padding: 4px;
box-sizing: border-box;
border-top: 2px solid darkgray;
background-color: white;}
#list {
padding: 20px;
margin-top: 60px;
margin-bottom: 60px;
min-height: calc(100vh - 120px);
}
table {border-spacing: 0}
th{
padding: 16px;
color: #5B7042;
border-bottom: 2px solid #5B7042}
td {
padding-top: 6px;
padding-bottom: 6px;
border-bottom: 1px solid lightgray;}
td:not(.name) {text-align: center}
tbody tr:hover{
transform: scale(1.01);
background-color: #E3E3E3}
.pic{
display: inline-block;
width: 25px;
clip-path: circle();
margin-right: 10px;}
<link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>
<div class='topbar'></div>
<form id='list'>
<table>
<colgroup>
<col width='1%'>
<col width='6%'>
<col width='3%'>
<col width='3%'>
<col width='3%'>
<col width='3%'>
<col width='3%'>
</colgroup>
<thead>
<tr>
<th><input type='checkbox'></th>
<th>Student</th>
<th>Seen</th>
<th>Lvl</th>
<th>Pay</th>
<th>Money</th>
<th>Streak</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' id='1'></td>
<td class='name'>
<label for="1">
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>John Doe</span>
</label>
</td>
<td><label for="1">1d ago</label></td>
<td><label for="1">15</label></td>
<td><label for="1">$10/hr</label></td>
<td><label for="1">$1300</label></td>
<td><label for="1">🔥32</label></td>
</tr>
<tr>
<td><input type='checkbox' id='2'></td>
<td class='name'>
<label for="2">
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>Jane Doe</span>
</label>
</td>
<td><label for="2">3m ago</label></td>
<td><label for="2">21</label></td>
<td><label for="2">$11/hr</label></td>
<td><label for="2">$2560</label></td>
<td><label for="2">🔥15</label></td>
</tr>
</tbody>
</table>
</form>
<div id='bottombar'></div>
It's not possible to use the <label> tag to turn the entire table row into a label. To do this, you need to use JavaScript.
In the code below, a click event is attached to the <tr> elements of a table. If one of them is clicked, the checkbox inside it is toggled. That happens even if you click the spaces between cells.
Also, note that every checkbox has an aria-labelledBy attribute which points to the user name table cell, preserving accessibility. You can apply the same concepts to your table.
document.querySelector('table').addEventListener('click', (e) => {
if (e.target.tagName === 'INPUT') return;
const row = e.target.tagName === 'TR' ? e.target : e.target.parentNode;
const childCheckbox = row.querySelector('input[type="checkbox"]');
childCheckbox.checked = !childCheckbox.checked;
});
td {
padding: 1rem;
border: 1px solid black;
}
<table>
<tr>
<td>
<input type="checkbox" aria-labelledBy="user1">
</td>
<td id="user1">User 1</td>
<td>Info A</td>
<td>Info B</td>
</tr>
<tr>
<td>
<input type="checkbox" aria-labelledBy="user2">
</td>
<td id="user2">User 2</td>
<td>Info A</td>
<td>Info B</td>
</tr>
<table>
The way I was able to get this working was I added a class name to the tr tags and then used some JavaScript. The JavaScript I'm using added the click event listener to the entire row and then from within the click even listener I checked to see if the checkbox was checked. I created a CodeSandbox for this: https://codesandbox.io/s/trusting-architecture-8s13o?file=/src/index.js
I am trying to have a triangle/arrow at the right of arrow-td. Initial plot with the code below works but the triangle/arrow doesn't scroll with its container arrow-td.
How could I keep the triangle positioned relative to arrow-td even when the user scrolls through main-div?
NOTE: The arrow should stay outside (just right) of main-div. Adding position: relative to arrow-td won't work as that would force arrow to be inside of main-div since overflow-y: auto is activated on main-div.
Check out the plunker
HTML
<div class="main-div">
<table>
<tbody>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td class="arrow-td">
<div class="left-of-arrow">With arrow</div>
<div class="arrow"></div>
</td>
</tr>
.........
</tbody>
</table>
</div>
CSS
.main-div{
height: 200px;
width: 200px;
overflow-y: auto;
}
table{
width: 100%;
max-width: 100%;
}
td{
width: 100%;
background-color: #eee;
display: flex;
}
td>div{
display: flex;
}
.arrow{
right: 300px;
position: absolute;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid red;
}
Isn't possible to your arrow track your td without adding a position relative and changing you main-div width to 100% and setting a size to your table, like I did on that plunker
See my Plunker
To do what you wan't you'll need to add a JavaScript function to track the offset of that td every time you scroll the page, and setting the top property of your arrow.
EDIT:
I wasn't in home yesterday, so, I couldn't write a code to solve your issue. I saw your code and there is some issues on your approach. I can't comment there because I don't have karma. But I did some comments on that fork, explaining why those approaches aren't that good.
Updated Plunker
You have your .arrow set with position absolute, meaning it will not be relative to any scrolling you do unless you explicitly specify it to be.
So, by adding position: relative to your .main-div, you will achieve the arrow moving relative to the .arrow-td.
Where your design fails in look and feel is on the .main-div itself. It has a fixed width of 200px. This may be intentional but for your purposes of having the arrow sit outside the table, it will just not be possible using the current HTML structure you have.
One thing you can do is play with how overflow works for your type of problem.
I decided to take a swing at implementing a solution which is what you see below... however the final implementation is truly up to you! I also put in comments a second version of how this could look, in the CSS named Example #2 give it a try :-)
.wrapper {
overflow-y: auto;
width: 335px; /* Example #2: change this to: 100% for a different visual effect */
}
.main-div {
height: 200px;
width: 100%; /* Example #2: change this to 200px for a different visual effect */
}
table {
width: 100%;
max-width: 100%;
}
td {
width: 100%;
background-color: #eee;
display: flex;
}
td > div {
display: flex;
}
.arrow {
left: 300px;
position: absolute;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid red;
}
.arrow-td {
position: relative;
}
<div class="wrapper">
<div class="main-div">
<table>
<tbody>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td class="arrow-td">
<div class="left-of-arrow">With arrow</div>
<div class="arrow"></div>
</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
</tbody>
</table>
</div>
</div>
This is how I solved the problem through javascript:
I simply track arrow-td's top position, if it is changed .arrow div's top position should also be modified accordingly.
Check out the PLUNKER
Code:
$(document).ready(function(){
setInterval(function(){
var heightLimit = $(".main-div").height();
var parentTop = $(".arrow").parent().position().top;
var arrowTop = $(".arrow").position().top;
//Change arrow top position only if parent's position has been changed
if(arrowTop != parentTop){
if(parentTop < 0 || parentTop > heightLimit -25){
$(".arrow").css("visibility","hidden");
}
else{
$(".arrow").css("visibility","visible");
$(".arrow").css("top",parentTop);
}
}
},500);
});
Good evening.
I wanted to ask, that is it possible to overlay table row with some transparent color and text?
Something like this:
I found from stackoverflow that its possible to overlay over using css, but never managed to get it to work.
If its possible, maybe someone can point me to right way.
For example how to overlay middle table row with transparent color and text here:
<body>
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
https://jsfiddle.net/gx2vpm62/ ?
Thanks in advance.
You can do this by using an absolutely positioned element in the table. I don't know about cross browser support for this solution and the spacing is static.
.overlay {
position: absolute;
background: rgba(255,0,0,0.7);
left: 0.7em;
right: 0.7em;
height: 1.2em;
text-align: center;
}
tr {
position: relative;
}
<body>
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td class="overlay">Text</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
Its even possible to do this by pure CSS, but can be a bit finnicky to make it perfectly align. Try this:
table {
border-collapse: separate;
border-spacing: 0;
border-color: transparent;
overflow: hidden;
}
td {
position: relative;
height: 1.5em;
padding: 0;
border-color: transparent;
}
td:first-child {
width: 40%;
position: relative;
}
td:nth-child(2) {
width: 40%;
}
td:nth-child(3) {
width: 20%;
}
.overlay td:first-child:after {
position: absolute;
z-index: 1;
display: block;
text-align: center;
left: 0;
top: 0;
width: 252%;
height: 1.5em;
content:"text";
background-color: rgba(255, 0, 0, .7);
color: white;
}
<body>
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="overlay">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
Update: now should also work in Chrome, but I really havent tried to get it working in every browser on this planet, so keep this in mind before downvoting me again. I just want to help.
Additional trickery involved applying the :after rule on the td, not the tr. But you have to know the relative width of the td to calculate the overall width of your overlay, and then you still don't get always the exact width matching the table. Therefor the slightly "overshoot" and the overflow:hidden to mask that issue.
<table style="float:left;">
<tr>
<td><input id="c11" placeholder="c1,1" class="matr_c" readonly></td>
<td><input id="c12" placeholder="c1,2" class="matr_c" readonly></td>
</tr>
<tr>
<td><input id="c21" placeholder="c2,1" class="matr_c" readonly></td>
<td><input id="c22" placeholder="c2,2" class="matr_c" readonly></td>
</tr>
</table>
I have a code of some matrix in html and css. It looks like this picture now.
http://i.stack.imgur.com/4HJJ3.png
But I want to add some border like this.
http://i.stack.imgur.com/BKvGP.png
you can use pseudo element :before and :after for giving border
table {
position: relative;
}
table:before,
table:after {
content: '';
height: 100%;
position: absolute;
border-color: black;
border-style: solid;
width: 10px;
top: -1px;
}
table:before {
left: -2px;
border-width: 2px 0px 2px 2px;
}
table:after {
right: -2px;
border-width: 2px 2px 2px 0px;
}
<table>
<tr>
<td>
<input id="c11" placeholder="c1,1" class="matr_c" readonly>
</td>
<td>
<input id="c12" placeholder="c1,2" class="matr_c" readonly>
</td>
</tr>
<tr>
<td>
<input id="c21" placeholder="c2,1" class="matr_c" readonly>
</td>
<td>
<input id="c22" placeholder="c2,2" class="matr_c" readonly>
</td>
</tr>
</table>
1- You can add a background image for the table, by these borders, and style the table.
OR:
2- You can put two divs around the table from the left and the right, then give the a background image for each div with one border image, also let the divs have an absolute position.
I want to have a fixed width for my editable table, but I also wanting to set different width for each TD.
In my attempt I am able to get the table set at a fixed width, but this causes the width of the TDs appear to be 50% instead of the 80% - 20% I had before setting the fixed width
CSS
table {
margin: 15px 0;
border: 1px solid black;
table-layout: fixed;
width: 100%;
}
.fixed td:nth-of-type(1) {width:20%;}
.fixed td:nth-of-type(2) {width:80%; text-align: left;}
.fixed {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
.fixed td {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
HTML
<div class="fixed" contenteditable="true">
<table>
<tbody>
<tr>
<td colspan="2">Header:</td>
</tr>
<tr>
<td>Name:</td>
<td><br/></td>
</tr>
<tr>
<td>DOB::</td>
<td><br/></td>
</tr>
<tr>
<td>Comments:</td>
<td><br/></td>
</tr>
</table>
What am I missing? Check this Fiddle if it will help. Try it out by typing enough to see it automatically goes to the next line after a certain point.
The problem with your code is that your first <tr> is having colspan="2". So when you give a width:100% to all the TDs of the table, the css won't get applied to the underlying TDs as you want.
Your solution is to separate the Header td: <td colspan="2">Header:</td> into a separate table (Refer HTML-1 below)
or
put the underlying TDs in the same TR as that of the header (Refer HTML-2 below).
Also change the CSS and simplify it like I did below. you have written a lot of unnecessary CSS.
Working Fiddle Here
Here's what I tried. try this:
HTML-1:
<table class="fixed" >
<tbody>
<tr>
<td colspan="2">Header:</td>
</tr>
</tbody>
</table>
<table class="fixed" >
<tbody>
<tr>
<td>Name:</td>
<td>test</td>
</tr>
<tr>
<td>DOB::</td>
<td>tes</td>
</tr>
<tr>
<td>Comments:</td>
<td>test</td>
</tr>
</table>
HTML-2:
<table class="fixed" >
<tbody>
<tr>
<td colspan="2">Header:</td>
<tr>
<td>Name:</td>
<td>test</td>
</tr>
<tr>
<td>DOB::</td>
<td>tes</td>
</tr>
<tr>
<td>Comments:</td>
<td>test</td>
</tr>
</tr>
</tbody>
</table>
Simplified CSS:
table {
margin: 0 0;
width: 100%;
table-layout: fixed;
}
.fixed td:nth-of-type(1) {width:80%;}
.fixed td:nth-of-type(2) {width:20%; text-align: left;}
.fixed td {
margin:0px;padding:0px;
border:1px solid #000; }
You have Errors in your html syntax although that is nothing to do with the problem.
See if you need something like this fiddle.
table {
margin: 15px 0;
border: 1px solid black;
width: 100%;
}
.fixed td:nth-of-type(1) {width:20%;}
.fixed td:nth-of-type(2) {width:80%; text-align: left;}
.fixed {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
.fixed td {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
<div class="fixed" contenteditable="true">
<table>
<tbody>
<tr>
<td colspan="2">Header:</td>
</tr>
<tr>
<td>Name:</td>
<td><br/></td>
</tr>
<tr>
<td>DOB::</td>
<td><br/></td>
</tr>
<tr>
<td>Comments:</td>
<td><br/></td>
</tr>
</tbody>
</table></div>
otherwise you wont be able to achieve variable td width as all the td will have same width in a column.
you can use colspan attribute for a workaround.