Sorry if this is a plainly obvious answer, I am a horrible web designer.
I am making a help page for my program, and I'm using a table to show the hotkeys. I used CSS to center it and remove the border.
The header of the table is Action, and Trigger, but they do not show up when I open the HTML with my broswer, only the table data. To the point, why does this happen and how can it be fixed?
A fiddle: http://jsfiddle.net/CaffeineToCode/rq9hc7hL/1/
<!DOCTYPE html>
<html>
<head>
<title>Help</title>
</head>
<style>
body {
background: -webkit-linear-gradient(left, #F99200, #FDE000);
background: -o-linear-gradient(left, #F99200, #FDE000);
background: -moz-linear-gradient(left, #F99200, #FDE000);
background: linear-gradient(to right, #F99200, #FDE000);
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
table, td, th {
border: none;
}
td {
padding: 10%;
}
</style>
<body>
<div class="center">
<table>
<tr>
<th>Action</th> <!-- No header??? -->
<th>Trigger</th>
</tr>
<tr>
<td>Fullscreen</td>
<td>"f11" key</td>
</tr>
<tr>
<td>Turn page forward</td>
<td>"→" key or right page curl</td>
</tr>
<tr>
<td>Turn page backward</td>
<td>"←" key or left page curl</td>
</tr>
<tr>
<td>Set bookmark</td>
<td>Bookmark icon, <i>CTRL + B</i>, or Menu > Set bookmark</td>
</tr>
<tr>
<td>Go to bookmark</td>
<td>Menu > Go to bookmark</td>
</tr>
<tr>
<td>Go to page</td>
<td>Menu > Go to page</td>
</tr>
<tr>
<td>Go to page</td>
<td>Menu > Go to page</td>
</tr>
<tr>
<td>Go to book</td>
<td>Menu > Go to book</td>
</tr>
<tr>
<td>Go to verse</td>
<td>Menu > Go to book, then type "<book> <verse>"</td>
</tr>
</table>
</div>
</body>
</html>
Add: height:100%; to .center div.
http://jsfiddle.net/rq9hc7hL/5/
Also, as mentioned in answer above - no need for absolute positioning....
Change your .center class to this:
.center {
margin: auto;
width: 50%;
}
There is no need for absolute position. If you want it to be centered, juste use margin: auto;
Working Fiddle
You can resolve this thing by changing 3 style properties in .center as follow:
transform: translate(-50 %, -15%);
or
top: 150%;
or
height : 100%
You need to remove this CSS rule: td {padding: 10%;}
Related
I have a table with td elements holding text, left-aligned as normal.
Under certain conditions, I am adorning my td elements with a background image (denoted by a tick).
My css element to attempt to achieve this is:
td.entered {
background: url(../images/tick.png) no-repeat;
float: right;
}
<table>
<tr>
<td class "entered">Here is some text</td>
</tr>
</table>
However, no matter how I adjust this CSS, I don't get what I want, and the tick image appears in the centre of the td.
Is there a way to make this image float on the right, so that it interferes less with the text in that cell?
Perhaps this?
td.entered {
width: 200px;
background: url("https://www.freeiconspng.com/thumbs/check-tick-icon/tick-mark-icon-png-7.png") right -1px no-repeat ;
background-size: 25px;
}
<table>
<tr>
<td class="entered">Here is some text</td>
</tr>
</table>
Without images
td.entered {
width: 200px;
}
span.ticked:after {
content: "✓";
display: inline-block;
float: right
}
<table>
<tr>
<td class="entered">Here is some text<span class="ticked"></span></td>
</tr>
</table>
Dynamic demo
JavaScript to show what the cell looks like before and after the span has ticked
document.querySelector(".entered").addEventListener("click",function() {
this.querySelector("span").classList.add("ticked");
})
td.entered {
width: 200px;
}
span.ticked:after {
content: "✓";
display: inline-block;
float: right
}
<table>
<tr>
<td class="entered">Here is some text<span></span></td>
</tr>
</table>
I am using a (bootstrap) table where I put a link inside one of the cells, where it might happen, that the actual link text is empty, thus not showing the link element (or better to say the user can't click it). Now the goal is, that the link element should take up the whole cell space regardless of whether there is some text in the link or not.
<table class="table table-bordered table-striped">
<tr>
<td><a ...>Text that might be empty</a></td>
...
I have tried setting the display property of the a-tag to inline-table which worked for the most browsers except IE. Is there a nice, clean and crossbrowser compatible way to achieve this?
Give the anchor a display: block. It then will take the full width of its parent.
I've made you this demo. By clicking the button, you'll see how it works.
Note, that the anchor should at least have 'something' in it.
$('button').click(function() {
$('a').toggleClass('block');
});
td {
border: 1px solid red;
}
tr, td {
height: 100%;
}
a {
background: blue;
}
a.block {
display: block;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td> </td>
<td>Text<br />text</td>
</tr>
<tr>
<td>Text text</td>
<td>Text text</td>
</tr>
</table>
<button>Toggle block</button>
Set min-width for the column
<td style="min-width:50px"><a ...>Text that might be empty</a></td>
This will work with/without text.
.hasLink{
position: relative;
height: 38px;
}
.hasLink a{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 0px; //if you don't want to show any text
padding: 8px 0 0 5px;
}
<tr>
<td class="hasLink"></td>
<td></td>
</tr>
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);
});
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>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
table {border: 1px solid black; width: 500px}
.title {height: 40px}
.close {float: right}
td {text-align: center; border: 1px solid black}
</style>
</head>
<body>
<table>
<tr>
<td class="title"> Centered <span class="close">XXXXX</span> </td>
</tr>
<tr>
<td>content</td>
</tr>
<tr>
<td>content</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</body>
</html>
In this example, the "XXXX" is indeed placed to the right, but this causes the "Centered" text to be offset slightly to the left. This is because the "XXXX" is still taking up space in the document flow next to the text "Centered". How can I have it so "Centered" is centered exactly like the rest of the table?
heres and example rendering:
rendering http://img43.imageshack.us/img43/9659/screenshoteoo.png
If you absolutely position the span.close, it won't take up space and your title should be perfectly centered:
tr td {
position: relative;
}
tr td span.close {
position: absolute;
top: 0;
right: 0;
}
Edit Whoops - never encountered that before. Normally a parent with position: relative will act as the coordinate system for a child with position: absolute, but not in the case of a <td>. If you wrap your title and span.close in a <div> with the following code you should be in business:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 strict.dtd">
<html>
<head>
<style>
table {border: 1px solid black; width: 500px}
.title div {
position: relative;
height: 40px;
}
td {text-align: center; border: 1px solid black}
td span.close {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<table>
<tr>
<td class="title">
<div>Centered <span class="close">XXXXX</span></div>
</td>
</tr>
<tr>
<td>content</td>
</tr>
<tr>
<td>content</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</body>