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
This question already has answers here:
Space between <td>. Why and how can I remove?
(7 answers)
Closed 6 years ago.
In a large HTML table I have an input part consisting of two adjacent cells. The first one is a right-aligned pound sign and the next one is an input cell (to signal that this part is inputting an amount).
I would like the "double cell" to have red background, but dont seem to be able to remove the white border line between them. As comparison, if you join two cells through colspan, you obviously do not get any separation and I would like to create the same effect for the input cell combo.
Note I do want borders everywhere else in that table, just not between those cells.
<table>
<tr>
<td style="background-color:red;text-align:right;padding-right:0;border-width: 1px 0 1px 1px;border-spacing:0px;">£</td>
<td style="background-color:red;padding-left:0;border-width: 1px 1px 1px 0;border-spacing:0px;">
<input type="text" style="background-color:red" value="0">
</td>
</tr>
<tr>
<td style="background-color:green" colspan="2">no line</td>
</tr>
</table>
Removing the border between <input> and pound sign, use the pseudo :before and make a fake border of the same color (in your case red).
Have a look at the snippet below:
.pound-sign {
background-color:red;
text-align:right;
padding-right:0;
border-width: 1px 0 1px 1px;
border-spacing:0px;
}
.input-holder {
position: relative;
background-color:red;
padding-left:0;
border-spacing:0px;
}
.input-holder:before {
content: '';
position: absolute;
top: 0;
left: -3px;
width: 3px;
height: 100%;
background: red;
}
.input-holder input {
background-color:red;
border: 1px solid #fff;
}
.green {
background-color:green;
}
<table>
<tr>
<td class="pound-sign" style="">£</td>
<td class="input-holder">
<input type="text" value="0">
</td>
</tr>
<tr>
<td class="green" colspan="2">no line</td>
</tr>
</table>
Hope this helps!
http://jsfiddle.net/HnnHf/1/
Trying to understand what I do wrong. Plain table, I want input boxes to fill cells evenly. On first row you see 2 inputs and second row has one input spanned across cells.
Their right sides don't match. Why? When I run inspector it shows additional pixels?
Part of my HTML:
<div style="width: 1000px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-top: 10px;">
<table>
<tr>
<td style="width: 80px;"><label>From </label></td>
<td style="width: 120px;">
<input type="text" class="fill-space" />
</td>
<td style="width: 80px;"><label>To </label></td>
<td style="width: 120px;">
<input type="text" class="fill-space" />
</td>
<td style="width: 80px;"><label>Sort by </label></td>
<td></td>
</tr>
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td></td>
<td colspan="3">
<input type="text" class="search" />
</td>
<td></td>
<td>
Refresh button
</td>
</tr>
</table>
</div>
Style:
td label {
width: 100%;
color: #F1F1F1;
text-align: right;
vertical-align: central;
}
input.fill-space {
width: 100%;
}
input.search {
width: 100%;
background-image: url("/images/Search.png");
background-position: right center;
background-repeat: no-repeat;
}
</style>
My live site misalignment:
Also, why do I get this another border inside input if I set background?
Working fiddle: http://jsfiddle.net/ghUEw/
Default padding and margins for table elements differ in different browsers.
So you'd better use a CSS reset on table elements.
table * {
margin: 0;
padding: 0;
}
Then, comes the border-collapse property. It determines whether the table borders are collapsed into a single border or rendered individually, let's say for neighboring table cells. You need to set it as following to make them collapsed since you have different number of cells per table row.
table {
border-collapse: collapse;
}
Then, you need to set the borders of the inputs in your table if you want them look the same.
table input {
border: 1px solid #aaa;
}
If you don't want any borders to appear, replace it with border: none;
Then, in your CSS, for the labels to appear the way you want, you can apply float:right; (also corrected vertical-align: middle;)
td label {
width: 100%;
color: #F1F1F1;
text-align: right;
vertical-align: middle;
float:right;
}
I am making a form in html, and I am using a table for layout of my input controls and labels.
For each input of a form, there is one label associated with it.
I want a border to appear around each pair of adjacent cell that is a label and its associated input tag.
I tried making a div around the two adjacent <td> tags but it says "invalid tag" as only <td> are allowed inside a <tr> tag.
Is there anyway to do it either in CSS or anything else ?
My HTML sample code :
<table>
<tr>
<td>Date</td>
<td><input type="text"></td>
<td>Name</td>
<td><input type="text"></td>
</tr>
</table>
Below is a screenshot of what I want to achieve.
You've not collapsed your table border, try this
Demo
table {
border-collapse: collapse;
}
table, td {
border: 1px solid #c00000;
}
If you could apply classes to your td's you could try this:
<table cellspacing="0">
<tr>
<td class="label">Label1: </td>
<td>input1</td>
<td class="label">Label2: </td>
<td>input2</td>
</tr>
</table>​
With the following css:
table {
background-color: silver;
border-collapse: collapse;
}
td {
padding: 5px;
border: 1px solid red;
border-width: 1px 1px 1px 0px;
}
td.label {
border-width: 1px 0px 1px 1px;
}
​
http://jsfiddle.net/H3p8e/2/
Try to apply border-collapse:collapse; rule.
After some research, I couldn't find an answer to this question. There was this but it didn't really answer my question. I would like to "strikethrough" a complete HTML table row in CSS, not just the text in it. Is it at all possible? From the example that I linked, it seems tr styling doesn't even work in Firefox. (And anyway, text-decoration only applies on text afaik)
Oh yes, yes it is!
CSS:
table {
border-collapse: collapse;
}
td {
position: relative;
padding: 5px 10px;
}
tr.strikeout td:before {
content: " ";
position: absolute;
top: 50%;
left: 0;
border-bottom: 1px solid #111;
width: 100%;
}
HTML:
<table>
<tr>
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
<tr class="strikeout">
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
<tr>
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
</table>
http://codepen.io/nericksx/pen/CKjbe
My answer (below) said that it is not possible. I was wrong, as pointed out by #NicoleMorganErickson. Please see her answer (and upvote it!) for how to do it. In short, you use :before pseudo-class to create an element that draws a border across the middle of the cell, above the content:
table { border-collapse:collapse } /* Ensure no space between cells */
tr.strikeout td { position:relative } /* Setup a new coordinate system */
tr.strikeout td:before { /* Create a new element that */
content: " "; /* …has no text content */
position: absolute; /* …is absolutely positioned */
left: 0; top: 50%; width: 100%; /* …with the top across the middle */
border-bottom: 1px solid #000; /* …and with a border on the top */
}
(original answer)
No, it is not possible using only CSS and your semantic table markup. As #JMCCreative suggests, it is possible visually using any number of ways to position a line over your row.
I would instead suggest using a combination of color, background-color, font-style:italic and/or text-decoration:line-through to make the entire row obviously different. (I'd personally strongly 'fade out' the text to a color much closer to the background than normal text and make it italic.)
tr {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGCQBAAAIwAbDJgTxgAAAABJRU5ErkJggg==');
background-repeat: repeat-x;
background-position: 50% 50%;
}
I used http://www.patternify.com/ to generate the 1x1 image url.
Edit
In a recent Bootstrap 4.3 ServiceNow Angular.js project, I found myself having to make some changes, and instead used the following CSS, similar to the experience of Revoman:
tr.strikeout td.strike-able:before {
content: " ";
position: absolute;
display: inline-block;
padding: 12px 10px;
left: 0;
border-bottom: 2px solid #d9534f;
width: 100%;
}
Original Post
I like Nicole Morgan Erickson's answer, but it might cause side effects if your implement his solution verbatim. I've add some small tweaks to keep this kosher, below... so that we're not globally modifying every table or every td with this CSS.
I also wanted a button on the row to strike out the row, but I didn't want to strike out the column with the button, for visibility sake. I just wanted to strike out the rest of the row. For this, I made it so that every column that wants to be capable of showing the strike out must declare such by also being marked with a class. In this iteration, you'd need to mark the table as strike-able, and also mark each td as strike-able; but you gain safety by not side effecting any non-strike-able tables, and you gain control of which columns to strike out.
CSS:
table.strike-able {
border-collapse: collapse;
}
table.strike-able tr td {
position: relative;
padding: 3px 2px;
}
table.strike-able tr th {
position: relative;
padding: 3px 2px;
}
table.strike-able tr.strikeout td.strike-able:before {
content: " ";
position: absolute;
top: 50%;
left: 0;
border-bottom: 2px solid #d9534f;
width: 100%;
}
Usage:
<table class="strike-able" id="Medications" data-item-count="#Model.Medications.Count">
<tr>
<th>
Some Column
</th>
<th>
Command Column
</th>
</tr>
<tr class="strikeout">
<td class="strike-able"></td>
<td>Button that Toggles Striking Goes Here (active)</td>
</tr>
<tr>
<td class="strike-able"></td>
<td>Button that Toggles Striking Goes Here</td>
</tr>
</table>
Lastly, since I'm using this with Bootstrap, and treating the deletions as a dangerous thing to do, I've formatted the colors a little to match my use.
EDIT: As pointed out by #Mathieu M-Gosselin in the comments, this actually puts the line behind the text. That said, if your line is the same color as your text or you are using a small-ish font, this still works pretty well.
For what it's worth, here's a pretty effective way to do it in pure CSS without using pseudo elements. You can change the thickness of the strikethrough line by adjusting the background-size.
table {
border-collapse: collapse;
}
td {
width: 100px
}
.strikethrough {
background: repeating-linear-gradient(
180deg,
red 0%,
red 100%
);
background-size: 100% 2px;
background-position: center;
background-repeat: no-repeat;
}
<table>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
<tr class="strikethrough">
<td>Foo Strike</td>
<td>Bar Strike</td>
<td>Baz Strike</td>
</tr>
</table>
#NicoleMorganErickson, I like your answer, but I could not get the strikeout to affect only the applied row. Also, I needed it to be applied multiple rows so I modified your solution down into a single class.
CSS:
tr.strikeout td:before {
content: " ";
position: absolute;
display: inline-block;
padding: 5px 10px;
left: 0;
border-bottom: 1px solid #111;
width: 100%;
}
http://codepen.io/anon/pen/AaFpu
Yes you can. In the first cell of the row you create a div containing a HR. Float the div to the left and specify its width as a % of its containing element, in this case the table cell. It'll stretch as wide as you want across the table cells in that row, even beyond the width of the table if you want.
This works for me:
<style>
.strikeThrough {
height:3px;
color:#ff0000;
background-color:#ff0000;
}
.strikeThroughDiv {
float:left;
width:920%;
position:relative;
top:18px;
border:none;
}
</style>
<table width="900" border="1" cellspacing="0" cellpadding="4">
<tr valign="bottom">
<td>
<div class="strikeThroughDiv"><hr class="strikeThrough"/></div>
One
</td>
<td>
<label for="one"></label>
<input type="text" name="one" id="one" />
</td>
<td>
<label for="list"></label>
<select name="list" id="list">
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three" selected>3</option>
</select>
</td>
<td>
Four
</td>
<td>
Five
</td>
</tr>
</table>
To control the width of your line you have to specify the width of the table cell containing the HR. For styling HR elements they say you shouldn't make it less than 3px in height.
Here's a very simple way that worked for me:
<table>
<tbody style="text-decoration: line-through">
-- Various table body stuff
</tbody> </table>
Not sure but it seems there were other answers mentioning simple and straightforward pure CSS solution...
#Ben Slade's answer is the closest of all, but still...
Just use text-decoration: line-through in your CSS! Add corresponding class and then use <tr class="strikethrough">!
.strikethrough {
text-decoration: line-through;
}
table,
th,
td {
border: 1px solid black;
}
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr class="strikethrough">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>