I want to click on HTML table cell and open new page. The solution is working fine if I have text into table sell. But if I have empty cell there is no hyperlink.
tr.clickable td a {
display: block;
background: green;
text-decoration:none;
}
How I can fill the cell space with the empty hyperlink?
tr.clickable td a {
display: block;
background: green;
text-decoration:none;
}
tr.clickable td a:after{
content: '';
display: inline-block;
}
<table width="100%" border="1">
<tr class="clickable">
<td>
</td>
</tr>
</table>
another solution
You can use :empty pseudo element.
tr.clickable td a:empty{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
You can give it fixed min-height and min-width, for example:
tr.clickable td a {
display: block;
background: green;
text-decoration:none;
min-width:10px;
min-height:10px;
}
EDIT:
Another solution is to use the CSS content property with before or after pseudo elements, by adding content: "\200B";, like this:
tr.clickable td a {
display: block;
background: green;
text-decoration: none;
}
tr.clickable td a::before {
content: "\200B";
}
<table width="100%" border="1">
<tr class="clickable">
<td>
</td>
</tr>
</table>
Related
I have an HTML table inside a container. On hover, I want to highlight the row, not only inside the table, but extending outside to the edges of the container.
This is my first attempt:
body {
display: flex;
justify-content: center;
}
.container {
display: flex;
justify-content: center;
width: 800px;
border: 1px dotted gray;
padding: 2rem;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 1px dashed purple;
}
td, th {
padding: .25rem;
position: relative;
text-align: left;
}
tr:hover {
background: lightgray;
cursor: pointer;
}
tr:hover td:first-child::before, tr:hover td:last-child::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 2rem;
background-color: lightgray;
}
td:first-child::before {
left: -2rem;
}
td:last-child::after {
right: -2rem;
}
<div class="container">
<table>
<thead>
<th>Dato</th>
<th>Lok. nr.</th>
<th>Navn</th>
<th>Status</th>
</thead>
<tbody>
<tr>
<td>06.12.2016</td>
<td>25736</td>
<td>Josommar-<br>set</td>
<td>I arbeid</td>
</tr>
<tr>
<td>07.12.2016</td>
<td>10232</td>
<td>Mannbru-<br>holmen</td>
<td>Avsluttet</td>
</tr>
</tbody>
</table>
</div>
It works fine in Chrome, but I have to support IE11, and in IE the before and after elements do not have the correct height. You can see the result in the screenshot below.
How can I do this in a way that also works in IE11?
https://jsfiddle.net/tbnzaga9/
#smenu a {
color: black;
text-decoration: none;
}
.button:hover {
background-color: #A9A9A9;
}
.button {
position: absolute;
border: 1px solid black;
cursor: pointer;
background-color: #d3d3d3;
width: 30%;
left: 1%;
}
.right {
position: absolute;
right: 60%;
}
#smenu table tr td p {
display: inline-block;
float: left;
}
<div id='smenu'>
<table>
<tr>
<th> Title</th>
<th class='right'> Date</th>
</tr>
<tr>
<td class='button'>test</td>
<td class='right'>
<p>4/27</p>
</td>
</tr>
</table>
</div>
I was making a list of separate websites and the dates they were made, but I can't get them to line up! I tried float:left and display: inline-block, but it's just not lining up. Any suggestions?
Also - is there a better way than using a table?
try these change in CSS.
#smenu a {
color: black;
text-decoration: none;
}
.button:hover {
background-color: #A9A9A9;
}
.button {
border: 1px solid black;
cursor: pointer;
background-color: #d3d3d3;
}
td {
text-align: center;
width: 200px;
height:25px;
}
#smenu table tr td p {
//display: inline-block;
//float: left;
}
Try to replace <p></p> by <div></div> or use a css reset sheet to clear the paragraph doing a line break. Also, I think tables are ok to do things like this, but limit you more. If you really wanted to you could mimic a table with some divs where you have your rows and in each one have your columns you could have differents classes by rows and by column in different rows.
I would remove all "position:absolute".
Given that you have tabular data, it makes sense to just use a regular table tag.
I've also added the following styles:
.right {
padding-right: 60%;
}
#smenu table {
width:100%;
}
.right p {
margin:0px;
}
th {
text-align: left;
}
You can see the changes here:
https://jsfiddle.net/tbnzaga9/2/
I am a newbie to css.
I have two td in a row of which first has overflow visible. The contents in the first div are overlapping with the second td as in the example below. I wish to make the div css properties like cursor: pointer over the second td. Thus, the div css properties should be on top of the second td.
Please help me with this.
https://jsfiddle.net/jt00uk3e/
Thanks.
table {
width: 0px;
table-layout: fixed;
}
td {
width:50px;
height:50px;
overflow: visible;
}
#td1 {
background-color: red;
}
#td2 {
background-color: green;
}
#div2 {
width: 200px;
height: 20px;
background-color: blue;
cursor: pointer;
}
<table>
<tr>
<td id="td2"><div id="div2"></div></td>
<td id="td1"></td>
</tr>
</table>
Add z-index to div
#div2 {
width: 200px;
height: 20px;
background-color: blue !important;
cursor: pointer;
position:relative;
z-index:
https://jsfiddle.net/jt00uk3e/6/
try this:
table {
width: 0px;
table-layout: fixed;
}
td {
width:50px;
height:50px;
overflow: visible;
}
#td1 {
background-color: red;
}
#td2 {
background-color: green;
}
#div2 {
position:relative;
z-index:1;
width: 200px;
height: 20px;
background-color: blue;
cursor: pointer;
}
<table>
<tr>
<td id="td2"><div id="div2"></div></td>
<td id="td1"></td>
</tr>
</table>
I'm using tables for semantic markup but styling them to resemble lists of multiple lines with icons to the left: http://jsfiddle.net/qs1zsL2s/
However, the inline-styled cells are shown one pixel down from the icons. How do I prevent this, so they begin at the same y-position?
HTML:
<table>
<tbody>
<tr><td><img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML5 logo"></td><td>First cell</td><td>Second cell</td><td>Third cell</td></tr>
<tr><td><img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML5 logo"></td><td>First cell</td><td>Second cell</td><td>Third cell</td></tr>
</tbody>
</table>
CSS:
td {
display: inline;
background-color: red;
}
td:first-child {
display: block;
float: left;
}
td:last-child {
display: block;
}
img {
height: 48px;
}
Just updated your fiddle: Fiddle
Just add vertical-align: top to your td
td {
display: inline;
background-color: red;
vertical-align:top;
}
For reference: https://developer.mozilla.org/en/docs/Web/CSS/vertical-align
You can simply add in the CSS properties position:relative and top:1px:
td:first-child {
display: block;
float: left;
position: relative;
top: 1px;
}
fiddle
I need to create a headline with equal length lines on both sides of the headline text, and a fixed size padding between the lines and the text. The text will vary so it must not set a width. The lines should take up all remaining width available in the headline container. The headline text must not set a background because the background behind it will vary. Something like this:
--------------------------------------------------------- Some text ---------------------------------------------------------
I solved it using a table:
<table width="100%">
<td><hr /></td>
<td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
<td><hr /></td>
</table>
You can try it out here: http://jsfiddle.net/md2dF/3/
Semantically this is a really bad solution, the headline has nothing to do with tabular data. How would you do this without a table?
To summarize (because the suggested solutions have all overlooked one or more requirements):
The headline must not have a fixed width
The headline text must not have a background
The headline text must not have a fixed width
The lines on either side of the text must take up all remaining width
The padding between the lines and the text must have a fixed width
If in doubt, look at http://jsfiddle.net/md2dF/3/
Newer answer that works on newer versions of IE and Firefox
Without any tricks:
fieldset.title {
border-top: 1px solid #aaa;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
}
fieldset.title legend {
padding: 5px 10px;
}
<fieldset class="title">
<legend>Some text</legend>
</fieldset>
Live demo on jsfiddle
Edit:
Without any background color nor image:
<div>
<div><hr></div>
<span>Some text</span>
<div><hr></div>
</div>
CSS:
div {
width:300px;
text-align:center;
display:table;
}
div > div {
display:table-cell;
vertical-align:middle;
}
div > span {
white-space:nowrap;
}
Works in IE8+
Live demo
Original answer:
Without any image:
<div>
<span>Some text</span>
</div>
CSS:
div {
border-bottom:1px solid #000;
line-height:16px;
text-align:center;
}
span {
background:#FFF;
position:relative;
bottom:-8px; /* half of line-height */
padding:0 15px;
}
Live demo
You can use any block element you want (h1, h2, whatever) instead of div.
The way to solve this without knowing the width and the background color is the following:
Structure
<div class="strike">
<span>Kringle</span>
</div>
CSS
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
}
.strike > span {
position: relative;
display: inline-block;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: red;
}
.strike > span:before {
right: 100%;
}
.strike > span:after {
left: 100%;
}
Example: http://jsfiddle.net/z8Hnz/
You can do it like so (for the background, you can make a 1px image of your color choice):
<h1><span>Some Text</span></h1>
h1 { width: 100%; text-align: center; background: url(pixel.jpg) repeat-x left center; }
h1 span { padding: 0 3px; background-color: #ffffff; }
Edit: Without bg color:
.hr { width: 100%; height: 40px; line-height: 40px; }
.hr span { width: 10%; text-align: center; float: left; margin: 0; display: inline-block; }
.hr .line { width: 45%; height: 100%; background: url(pixel.jpg) repeat-x left center; float: left; }
.hr .line.right { float: right;}
<div class="hr">
<div class="line left"></div>
<span>Some Text</span>
<div class="line right"></div>
</div>
You'll need to adjust percents and whatnot, but it works in general.