I cannot get this style to work. Take a look at my drawing:
Markup:
<h1Title</h1>
<table>
<tr>
<td>
<dfn>help</dfn>
<a href="link0.php">
<span>text</span></a>
</td>
<td><a href="link1.html">
<span>text</span></a>
</td>
</tr>
</table>
I'm trying to make the <td> element clickable by using the <a> element as a block. But, I need to put a small "header" with <dfn> element inside the <td> too. I can make the <dfn> align to top-right and preserve the <a> vertical text align relative to its container without conflicting with <dfn> when it exists.
Thank you in advance
I changed your markup bit and added some positioning and padding to get something close to the image you posted:
HTML
<h1>Title</h1>
<table>
<tr>
<td>
<span class="cellContainer">
<dfn>help</dfn>
text
</span>
</td>
<td>
text
</td>
</tr>
</table>
CSS
td {
border: 1px solid black;
}
.cellContainer {
position: relative;
display: inline-block;
padding: 12px 0;
}
a {
background: grey;
padding: 12px 24px;
}
dfn {
position: absolute;
top: 0;
right: 0;
}
jsFiddle Demo
The borders in the demo represent the cell borders. The grey background is the link area.
Related
I'm trying to add checklist symbols to the left edge of table cells. So far, this does work. When I'm trying to stack another char on top of the checklist symbol though, things get ugly.
I have found several ways to achieve the result I'm after, but none of them looks particularly good to me.
Does anyone have a better idea, preferably one that'd allow to concentrate on the semantics?
.checklist::before {
content: "◯ ";
}
.checklistabs::before {
content: "◯ ";
position: absolute;
}
.check::before {
content: " ✘";
position: absolute;
font-size: 130%
}
.checked {
position: absolute;
font-size: 130%
}
.checklisttext {
margin-left: 1.5em;
}
<table>
<tr>
<td class="checklist">
perfect as long as nothing needs to be overlaid
</td>
</tr>
<tr>
<td>
<b class="checked">✘</b>
◯ Seems to work best, but has explicit bullet symbol as part of the text.
</td>
</tr>
<tr>
<td>
<div class="checklistabs" />
<div class="check" /> If the bullet symbol goes into another absolutely positioned item, we need to make space at the beginning of the text. ::before would have been much more elegant.
</td>
</tr>
<tr>
<td class="checklist">
<div class="check" /> why does this introduce a linebreak?
</td>
</tr>
<tr>
<td class="checklistabs">
<div class="check" /> Saving on divs
</td>
</tr>
<tr>
<td>
<div class="checklistabs" />
<div class="check" />
<div class="checklisttext">So this works...</div>
</td>
</tr>
<tr>
<td class="checklist check">
Looks preferrable from a semantic point of view but does not work - see http://stackoverflow.com/questions/11998593/can-i-have-multiple-before-pseudo-elements-for-the-same-element
</td>
</tr>
</table>
If you position both the ::before and ::after absolutely and add a padding to the <td> element you can get the effect you want. It requires more CSS and some values heavily tied to your font-size. But if you change the px values to em it should scale well.
table {
width: 350px;
}
.checklist {
padding: 0 0 0 20px;
position: relative;
}
.checklist::before,
.checked::after {
position: absolute;
left: 0;
top: 0;
width: 17px;
text-align: center;
line-height: 20px;
}
.checklist::before {
content: "◯ ";
}
.checked::after {
content: " ✘";
font-size: 130%;
}
<table>
<tr>
<td class="checklist checked">
A little more CSS and positioning, but will work well if the text linebreaks.
</td>
</tr>
</table>
I would display the ◯ as an inline element, then place the ✘ over it using absolute positioning. Seems to work without any unnecessary markup.
.checklist:before {
content: "◯ ";
}
.checklist:after {
content: " ✘";
position: absolute;
left: .6em;
font-size: 1.3em;
top: .6em;
}
<table>
<tr>
<td class="checklist">
perfect as long as nothing needs to be overlaid perfect as long as nothing needs to be overlaid perfect as long as nothing needs to be overlaid perfect as long as nothing needs to be overlaid perfect as long as nothing needs to be overlaid
</td>
</tr>
</table>
why does this introduce a linebreak?
Because .check is a div with display: block; so it's contents will display on it's own line. Set it to display: inline-block; or apply float: left; to the .checklist:before element, and those elements will be on the same line.
I have a table that contains contenteditable=true cells.
I wish to insert a button into those cells but the problem is that I can backspace those buttons away and I don't want that too happen.
Here is what I am doing:
<table><tr>
<td contenteditable=true>Text Here
<button>Don't delete me!</button>
</td>
I don't want to create two spans inside the cell, one editable and one not, because I cant figure out how to make it fill the entire cell.
You can separate the button into another <td>.
td {border: dashed 1px red}
<table>
<tr>
<td contenteditable="true">Text Here
<td contenteditable="false"><button>Don't delete me!</button></td>
<td contenteditable="true">After button Text Delete me
</td>
</tr>
</table>
Don't nest any elements inside an element with contenteditable unless you don't care about them being deleted. Nest a contenteditable element within the <td> or put the <button> outside of <td> and use position:relative or transform:translate over the <td>. This Snippet demonstrates three ways.
The second and third examples are fragile and can break easily, the first example is the best and most simplest.
SNIPPET
.ghost {
position: relative;
right: 150%;
top: 14px;
}
.extended {
position: relative;
right: 12%;
vertical-align: top;
}
.bg {
position: relative;
right: 170%;
z-index: 0;
width: 100%;
height: 100%;
}
.up {
position: relative;
right: 170%;
z-index: 1;
}
button {
display: block;
}
td {
min-width: 210px;
}
<table>
<tr>
<td>
<label contenteditable=true>Example 1</label>
<button>Don't delete me!</button>
</td>
<td class='extended' contenteditable=true>
Example 2
</td>
<td>
<button class='ghost'>Don't delete me!</button>
</td>
<td>
<div class='bg' contenteditable=true>Example 3</div>
<button class='up'>Don't delete me!</button>
</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>
How can i perfectly align text to the top of a table cell? By perfectly, I mean that the top of the letters touch the border of the table cell.
An additional difficulty in my case is that I need to use a large line height (approximately double the font height). As a result, there's is a considerable space between the top of the letters and the cell border because the difference between the font height and the line height is distributed equally to both the top and bottom of the text (so called half-leading).
I've setup a JSFiddle.
<table>
<tbody>
<tr>
<td> </td>
<td>NOT PROPERLY ALIGNED TO THE TOP</td>
</tr>
</tbody>
</table>
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
padding: 0;
margin: 0;
}
td {
height: 200px;
vertical-align: top;
font-size: 18px;
line-height: 40px;
border: solid 1px black;
background-color: #ddd;
}
How about wrapping necessary text in some spans and adding negative position/margin, like
span {
position: relative;
top: -12px;
}
Fiddle
But for a good readability, you'd rather don't need to remove space at top (imho)
Look, the text at left side looks better.
If you changed your html to:
<table>
<tbody>
<tr>
<td> </td>
<td><span>NOT PROPERLY ALIGNED TO THE TOP</span></td>
</tr>
</tbody>
</table>
adding <span> tags
Then you can go:
td span {
margin-top: -15px;
}
Hope this helps
Demo
The issue is because of the line-height
You can change the line-height of the first line by using the selector :first-line like
td:first-line {
line-height: 10px;
}
I have a solution but it goes with JS, not pure CSS only.
HTML (added the 'span' tag inside 'td'):
<table>
<tbody>
<tr>
<td> </td>
<td>
<span id="myText">PROPERLY ALIGNED TO THE TOP</span>
</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function(){
var span = $("#myText");
var lineHeight = parseInt(span.css("line-height"));
var fontSize = parseInt(span.css("font-size"));
var shift = (lineHeight-fontSize)/2;
var shiftPx = "-"+shift+"px";
//alert(lineHeight);
//alert(fontSize);
span.css({
"position":"relative",
"top":shiftPx
});
});
Full jsfiddle: http://jsfiddle.net/jondinham/p8g1cx6b/
I have a table of data and each cell is a link. I want to allow the user to click anywhere in the table cell and have them follow the link. Sometimes the table cells are more than one line but not always. I use td a {display: block} to get the link to cover most of the cell. When there is one cell in a row that is two lines and the others are only one line the one liners don't fill the entire vertical space of the table row. Here is the sample HTML and you can see it in action here http://www.jsfiddle.net/RXHuE/:
<head>
<style type="text/css">
td {width: 200px}
td a {display: block; height:100%; width:100%;}
td a:hover {background-color: yellow;}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
</tbody>
</table>
</body>
Set an arbitrarily large negative margin and equal padding on the block element and overflow hidden on the parent.
td {
overflow: hidden;
}
td a {
display: block;
margin: -10em;
padding: 10em;
}
http://jsfiddle.net/RXHuE/213/
You need a small change in your CSS. Making td height:100%; works for IE 8 and FF 3.6, but it doesn't work for Chrome.
td {
width: 200px;
border: solid 1px green;
height: 100%
}
td a {
display: block;
height:100%;
width:100%;
}
But making height to 50px works for Chrome in addition to IE and FF
td {
width: 200px;
border: solid 1px green;
height: 50px
}
td a {
display: block;
height:100%;
width:100%;
}
Edit:
You have given the solution yourself in another post here; which is to use display: inline-block;.
This works when combined with my solution for Chrome, FF3.6, IE8
td {
width: 200px;
border: solid 1px green;
height: 100%}
td a {
display: inline-block;
height:100%;
width:100%;
}
Update
The following code is working for me in IE8, FF3.6 and chrome.
CSS
td {
width: 200px;
border: solid 1px green;
height: 100%;
}
td a {
display: inline-block;
height:100%;
width:100%;
}
td a:hover {
background-color: yellow;
}
HTML
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
</tbody>
</table>
The example lays here
Little late to the party, but there's a nice solution I just discovered.
You can use a combination of relative and absolute positioned elements, along with a pseudo element to get the effect you're looking for. No extra markup needed!
Change the table cell (<td>), to be position: relative;, and create a ::before or ::after pseudo element on the <a> tag, and set it to position: absolute;, and also use top: 0; left: 0; right: 0; bottom: 0;.
Because the pseudo element is attached to the anchor tag, and you're telling it to take up the entire table cell, it will force the anchor tag to be at least that size, whilst not affecting the actual content of the anchor tag itself (thereby retaining its vertically centered alignment).
For example
table {
border-collapse: collapse;
table-layout: fixed;
}
td {
position: relative;
width: 200px;
padding: 0.5em 1em;
border: 2px solid red;
background-color: lime;
}
td a {
/* FONT STYLES HERE */
text-decoration: none;
}
td a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
<tr>
<td>
Cell 5
</td>
<td>
<a href="http://www.google.com/">Cell 6<br>
second line</a>
</td>
</tr>
</tbody>
</table>
Hope this helps!
Following hack works [Tested on Chrome / Firefox / Safari]
Have the same padding for td and anchor elements. And for anchor also have margin which is equal to -ve of padding value.
HTML
<table>
<tr>
<td><a>Hello</a></td>
</tr>
</table>
CSS:
td {
background-color: yellow;
padding: 10px;
}
a {
cursor:pointer;
display:block;
padding: 10px;
margin: -10px;
}
Working Fiddle :http://jsfiddle.net/JasYz/
Try display: block:
td a {display: block; height:100%;}
[EDIT] WTF ... I can confirm this doesn't work in FF 4 and Chrome. This works:
td a {display: block; height: 2.5em; border: 1px solid red;}
That suggests that height:100%; isn't defined in a table cell. Maybe this is because the cell gets its size from the content (so the content can't say "tell me your size" because that would lead to a loop). It doesn't even work if you set a height for the cells like so:
td {width: 200px; height: 3em; padding: 0px}
Again the code above will fail. So my suggestion is to use a defined height for the links (you can omit the width; that is 100% by default for block elements).
[EDIT2] I've clicked through a hundred examples at http://www.cssplay.co.uk/menus/ but none of them mix single line and multi-line cells. Seems like you hit a blind spot.
I will post the same answer here, as I did on my own question.
Inspired by Jannis M's answer, I did the following:
$(document).ready(function(){
$('table tr').each(function(){
var $row = $(this);
var height = $row.height();
$row.find('a').css('height', height).append(' ');
});
});
I added a since empty links (not containing text nodes) can not be styled(?).
See my updated fiddle.
Only problem here is that using display: block forces the browser to ignore the vertical align: center...
oops.
I jury rigged it to look right for one cell with height:60 and a font that occupied 20 pixels by adding a br... Then I realized that I had some items with 2-line text. Dang.
I ended up using the javascript. The javascript doesn't give the nice mousey pointy clicker thing, but the line of text does, so it will actually trigger a visual response, just not where I want it to... Then the Javascript will catch all the clicks that 'miss' the actual href.
Maybe not the most elegant solution, but it works well enough for now.
Now if I could only figure out how to do this the right way....
Any ideas on how to add the mouse icon change to a hand for the area covered by the onclick? Right now, the click to page works, but the icon only changes when it hits the href which only affects the text.
Why don't you just get rid of the <a> altogheter and add an onClick to the <td> directly?
<head>
<style type="text/css">
td {
text-align:center;
}
td:hover {
cursor:pointer;
color:#F00;
}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td onclick="location.href='http://www.google.com/';">Cell 1<br />second line</td>
<td onclick="location.href='http://www.google.com/';">Cell 2</a></td>
<td onclick="location.href='http://www.google.com/';">Cell 3</td>
<td onclick="location.href='www.google.com';">Cell 4</td>
</tr>
</tbody>
</table>
This way you cut out the middle man.
PS: i know this was asked and answered many years ago, but none of the answers above solved the problem in my case. Hope this helps someone.
For me the only solution is to replace <table> <tr> with <div>s and style them using display:table and display:table-row accordingly.
Then you can replace <td> with just <a> and style it with display:table-cell.
Work perfectly even on varying heights of <td> contents.
so original html without anchors:
<table>
<tr>
<td>content1<br>another_line</td>
<td>content2</td>
</tr>
</table>
now becomes:
a:hover
{
background-color:#ccc;
}
<div style="display:table; width:100%">
<div style="display:table-row">
content1<br>another_line
content2
</div>
</div>
I have used this solution: works better then the rest in my case.
CSS:
.blocktd {width: 100%; height: 100%; padding: 0px; overflow: hidden}
a.blocktd {margin: 0em; padding: 50px 20px 50px 20px; display: block;}
a.blocktd:hover {border: 4px solid #70AEE8; border-radius: 10px; padding: 46px 16px 46px 16px; transition: 0.2s;}
And in HTML: ...