I am not a programmer but try to do my best with my own website. I have an online apparel store and I want to display on the item description just the values available for the item, now I have a table with some rows that I want to hide and compress the table if there is not a value for it. for example...
<tr>
<td style="width:30%"><b>· Hip:</b> {{HIP}}</td>
</tr>
<tr>
<td style="width:30%"><b>· Inseam:</b> {{INSEAM}}</td>
</tr>
<tr>
<td style="width:30%"><b>· Rise:</b> {{RISE}}</td>
</tr>
it should display...
· Hip: {{HIP}}
· Inseam: {{INSEAM}}
· Rise: {{RISE}}
I want that if I didn't have the "inseam" value on my inventory file this row will hide and just display...
· Hip: {{HIP}}
· Rise: {{RISE}}
I can not use javascript as eBay don't allow it. Sorry if I do not express myself in the right programming language. Hope someone can help me. Thanks to all!!!
https://css-tricks.com/almanac/selectors/e/empty/
With a little bit of refactoring your code and the :empty pseudoselector:
HTML:
<table>
<tr>
<td class="hip" style="width:30%">{{HIP}}</td>
</tr>
<tr>
<td class="inseam" style="width:30%"></td>
</tr>
<tr>
<td class="rise" style="width:30%">{{RISE}}</td>
</tr>
</table>
CSS:
.hip:before {
content: '· Hip: ';
font-weight: bold;
}
.inseam:before {
content: '· Inseam: ';
font-weight: bold;
}
.rise:before {
content: '· Rise: ';
font-weight: bold;
}
.inseam:empty {
display: none;
}
fiddle: http://jsfiddle.net/3fL1y0mg/2/
try adding {{INSEAM}} into that table row
I'm a newbie learning the ways of html/css via online tutorials. Only now I've run into a little problem that I can't quite figure out, and I've tried suggestions to similar issues from this very site and more.
As the title says, my external css file just does not seem to work at all, though said code works fine if I apply it internally. I keep rereading the code trying to spot mistakes, but even css lint and codepen just seem to say I have overqualified elements, and not much else. I've tried just using the class names e.g. .Attack instead of td.Attack, but that didn't help.
The html is basically a table with some images, and I am only trying to apply a single stylesheet. Here is tcgdatabase.css
body {
background-color:transparent;
}
p {
color:#2E2435;
text-align:justify;
}
td {
text-align:left;
}
td.Name {
text-align:left;
width:250px;
font-size:30px;
font-weight:bold;
}
td.Type {
width:50px;
}
td.Stage {
text-align:left;
width:120px;
font-size:15px;
font-weight:bold;
}
td.HP,td.AP {
width:50px;
font-style:italic;
font-size:30px;
}
span.Points {
font-size:15px;
}
td.Attack,td.BaseDamage {
height:30px;
font-weight:bold;
font-size:20px;
}
td.Effect,td.Flavour {
text-align:justify;
}
td.WRR,td.WRRType {
height:20px;
font-weight:bold;
}
th {
text-align:center;
}
here is the html page, I even left the css in there enclosed with the to show how I added it internally:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>oddities</title>
<meta charset="UTF-8">
<link ref="stylesheet" type="text/css" href="file:///C:/Users/Admin/Documents/TCG/JBSet1/tcgdatabase.css">
<!--<style>
body {
background-color:transparent;
}
p {
color:#2E2435;
text-align:justify;
}
td {
text-align:left;
}
td.Name {
text-align:left;
width:250px;
font-size:30px;
font-weight:bold;
}
td.Type {
width:50px;
}
td.Stage {
text-align:left;
width:120px;
font-size:15px;
font-weight:bold;
}
td.HP,td.AP {
width:50px;
font-style:italic;
font-size:30px;
}
span.Points {
font-size:15px;
}
td.Attack,td.Base Damage {
height:30px;
font-weight:bold;
font-size:20px;
}
td.Effect,td.Flavour {
text-align:justify;
}
td.WRR,td.WRRType {
height:20px;
font-weight:bold;
}
th {
text-align:center;
}
</style>-->
</head>
<body>
<table style="width:100%">
<tr>
<td rowspan="9" style="width:420px"><img src="CacturneR.png" style="width:350px"></td>
<td class="Type"><img src="Energy Types/Dark.png" style="width:40px"></td>
<td class="Stage">Legendary</td>
<td class="Name">Yveltal</td>
<td class="HP">110<span class="Points">HP</span></td>
<td class="AP">0<span class="Points">AP</span></td>
</tr>
<tr>
<td class"AttackCost" colspan="2">
<img src="Energy Types/Dark.png" style="width:30px">
<img src="Energy Types/Colourless.png" style="width:30px">
</td>
<td class="Attack" colspan="2">Take In</td>
<td class="BaseDamage"><td>
</tr>
<tr>
<td class="Effect" colspan="5">
Attach up to 3 Pokémon from your hand to this Pokémon and heal 10 damage from this
Pokémon times the number of Pokémon cards just attached in this way. Each Pokémon attached
in this way provides 1 Energy of their type at a time (If they have more than 1 type,
they provide Energy of each of their types, but only 1 at a time).
</td>
</tr>
<tr>
<td class"AttackCost" colspan="2">
<img src="Energy Types/Dark.png" style="width:30px">
<img src="Energy Types/Dark.png" style="width:30px">
<img src="Energy Types/Colourless.png" style="width:30px">
<img src="Energy Types/Colourless.png" style="width:30px">
</td>
<td class="Attack" colspan="2">Riot Ballista</td>
<td class="BaseDamage"><td>
</tr>
<tr>
<td class="Effect" colspan="5">
Discard 1 card attached to this Pokémon. If that card is a Pokémon, this
attack does damage equal to the discarded Pokémon's HP. If it is not a
Pokémon, this attack does 50 damage and this Pokémon does 50 damage to
itself.
</td>
</tr>
<tr>
<td class="WRRType"><img src="Energy Types/Fairy.png" style="width:25px"></td>
<td class="WRR">weakness: x2</td>
<td class="Flavour" colspan="3" rowspan="3">
"This terrible beast has long since turned a blind eye to the havoc it
wreaks in its wake" - Anon.
</td>
<tr>
<td class="WRRType"><img src="Energy Types/Fighting.png" style="width:25px"></td>
<td class="WRR">resistance: -20</td>
</tr>
<tr>
<td class="WRRType"><img src="Energy Types/colourless.png" style="width:25px"></td>
<td class="WRR">retreat cost: x2</td>
</tr>
<tr>
<td class="Illus" colspan="3">Illus. NavaskaIII</td>
<td class="SetNumber">??/??</td>
<td class="Rarity">UR</td>
</tr>
</table>
</body>
</html>
I feel like I am missing something completely obvious, I really would appreciate the help!
In your link element change
ref="stylesheet" to rel="stylesheet"
notice the 'f' should be 'l'
Follow this syntax:
<link rel="stylesheet" href="style.css" type="text/css">
Path of css file has to be relative or absolute path..
Check your path to the CSS file. I would recommend using a relative path to the file.
Change href="file:///C:/Users/Admin/Documents/TCG/JBSet1/tcgdatabase.css" to something like href="/path/to/JBSet1/tcgdatabase.css".
If the CSS file is in the same folder as the HTML file, you can just use href="tcgdatabase.css".
Edit:
As stated above, also change ref="stylesheet" to rel="stylesheet".
I have two pieces of code. I was expecting these to have the same result, but no luck. Can someone explain this to me?
<table border=1px>
<tr>
<td width=20%>test1</td>
<td width=80%>test2</td>
</tr>
</table>
<style>
table { width:100%;}
td.1 { width:20%; }
td.2 { width:80%; }
</style>
This works as I expect. The first column is 20%, the second is 80%.
<table border=1px>
<tr>
<td class="1">test1</td>
<td class="2">test2</td>
</tr>
</table>
<style>
table { width:100%;}
td.1 { width:20%; }
td.2 { width:80%; }
</style>
This version shows column as 50/50.
Change the numbers 1 and 2 to more appropriate names. CSS names cannot begin with numbers.
<table border=1px>
<tr>
<td class="twenty-percent-width">test1</td>
<td class="eighty-percent-width">test2</td>
</tr>
</table>
<style>
table { width:100%;}
td.twenty-percent-width { width:20%; }
td.eighty-percent-width { width:80%; }
</style>
Read more here.
And for good programming practices you should never name variables, names, etc starting with a number
I have run into following issue. I am displaying a table with data on a page, which is nested in main . Its margin-left isset to 5% (margin-right too) and it has defined width. For some reason when I load the page in Chrome, the left margin is ignored. And here it gets interesting. When I open dev console it gets applied. If I reload the page with console open, it gets broken again. When I turn off any css setting in the console (or basicaly touch anything related to content) it gets fixed again. I am using Unsemantic framework for responsive behavior (only desktop part of it) and I had no trouble with it so far, just this. And since it behaves this strangely, I dont think it has anything to do with the code.
You can see it clearly on this short screencap: http://screencast.com/t/mGotS01iC
Just to be sure, I am posting HTML and CSS for the element:
<table class="grid-90 prefix-5 suffix-5">
<tbody>
<tr>
<th> UserName </th>
<th> Email </th>
<th> Guid </th>
<th> IsUsingTempPasswd </th>
<th> LastLogin </th>
<th> PasswordChanged </th>
<th>Actions</th>
</tr>
<tr>
<td> Administrator </td>
<td> admin#physter.com </td>
<td>
<div class="table-long">00000002-0000-0000-0000-000000000069</div>
</td>
<td class="cell-checkbox">
<input class="check-box" type="checkbox" disabled="disabled">
</td>
<td> </td>
<td> 26.7.2013 12:11:06 </td>
<td class="actions">
Edit
|
Details
|
Delete
|
Reset Password
</td>
</tr>
<tr>
<td> venca </td>
<td> venca#mail.cz </td>
<td>
<div class="table-long">00000002-0000-0000-0000-00000000006a</div>
</td>
<td class="cell-checkbox">
<input class="check-box" type="checkbox" disabled="disabled">
</td>
<td> 23.8.2013 12:23:39 </td>
<td> 26.7.2013 12:11:06 </td>
<td class="actions">
Edit
|
Details
|
Delete
|
Reset Password
</td>
</tr>
<tr>
<td colspan="7">
Create New
</td>
</tr>
</tbody>
</table>
Here is CSS for the element:
grid-90 {
float: left;
width: 90%;
}
.suffix-5 {
margin-right: 5%;
}
.prefix-5 {
margin-left: 5%;
}
.grid-5, .mobile-grid-5, .tablet-grid-5, .grid-10, .mobile-grid-10, .tablet-grid-10, .grid-15, .mobile-grid-15, .tablet-grid-15, .grid-20, .mobile-grid-20, .tablet-grid-20, .grid-25, .mobile-grid-25, .tablet-grid-25, .grid-30, .mobile-grid-30, .tablet-grid-30, .grid-35, .mobile-grid-35, .tablet-grid-35, .grid-40, .mobile-grid-40, .tablet-grid-40, .grid-45, .mobile-grid-45, .tablet-grid-45, .grid-50, .mobile-grid-50, .tablet-grid-50, .grid-55, .mobile-grid-55, .tablet-grid-55, .grid-60, .mobile-grid-60, .tablet-grid-60, .grid-65, .mobile-grid-65, .tablet-grid-65, .grid-70, .mobile-grid-70, .tablet-grid-70, .grid-75, .mobile-grid-75, .tablet-grid-75, .grid-80, .mobile-grid-80, .tablet-grid-80, .grid-85, .mobile-grid-85, .tablet-grid-85, .grid-90, .mobile-grid-90, .tablet-grid-90, .grid-95, .mobile-grid-95, .tablet-grid-95, .grid-100, .mobile-grid-100, .tablet-grid-100, .grid-33, .mobile-grid-33, .tablet-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-66 {
-moz-box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
table {
border: medium none;
margin-bottom: 2.5em;
margin-top: 1em;
text-align: left;
width: 100%;
}
body {
color: #006666;
font-family: "Segoe UI",Verdana,Helvetica,Sans-Serif;
font-size: 0.85em;
}
Anybody has an idea? I would be grateful for solution that would allow me keep the framework as it is and do not overwrite its behavior...
Width of 90% and the fact that you want the table on center are enough. The edges will be calculated automatically. So your code would look like this:
CSS
grid-90 {
width: 90%; }
.grid-5, .mobile-grid-5, .tablet-grid-5, .grid-10, .mobile-grid-10, .tablet-grid-10, .grid-15, .mobile-grid-15, .tablet-grid-15, .grid-20, .mobile-grid-20, .tablet-grid-20, .grid-25, .mobile-grid-25, .tablet-grid-25, .grid-30, .mobile-grid-30, .tablet-grid-30, .grid-35, .mobile-grid-35, .tablet-grid-35, .grid-40, .mobile-grid-40, .tablet-grid-40, .grid-45, .mobile-grid-45, .tablet-grid-45, .grid-50, .mobile-grid-50, .tablet-grid-50, .grid-55, .mobile-grid-55, .tablet-grid-55, .grid-60, .mobile-grid-60, .tablet-grid-60, .grid-65, .mobile-grid-65, .tablet-grid-65, .grid-70, .mobile-grid-70, .tablet-grid-70, .grid-75, .mobile-grid-75, .tablet-grid-75, .grid-80, .mobile-grid-80, .tablet-grid-80, .grid-85, .mobile-grid-85, .tablet-grid-85, .grid-90, .mobile-grid-90, .tablet-grid-90, .grid-95, .mobile-grid-95, .tablet-grid-95, .grid-100, .mobile-grid-100, .tablet-grid-100, .grid-33, .mobile-grid-33, .tablet-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-66 {
-moz-box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
table {
border: medium none;
margin-bottom: 2.5em;
margin-top: 1em;
text-align: left;
margin: 0 auto;
}
body {
color: #006666;
font-family: "Segoe UI",Verdana,Helvetica,Sans-Serif;
font-size: 0.85em;
}
In HTML remove the names of the two divisions: <table class="grid-90"> I hope that helps!
Only thing needed was a little "hack" - adding float:none !important; to <table> elelemnt was enough.
Thanks to Dragos Sandu who put me up to this - removing float:left from grid-90 class was his idea and first step I tried.
How can entire table cell be hyperlinked in html without javascript or jquery?
I tried to put href in td tag itself but its not working at least in chrome 18
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
Try this:
HTML:
<table width="200" border="1" class="table">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
.table a
{
display:block;
text-decoration:none;
}
I hope it will work fine.
Try this way:
<td> </td>
Easy with onclick-function and a javascript link:
<td onclick="location.href='yourpage.html'">go to yourpage</td>
Why not combine the onclick method with the <a> element inside the <td> for backup for non-JS? Seems to work great.
<td onclick="location.href='yourpage.html'">Link</td>
Here is my solution:
<td>
<div class="item-container">
<img class="icon" src="/iconURL" />
<p class="name">
SomeText
</p>
</div>
</td>
(LESS)
td {
padding: 1%;
vertical-align: bottom;
position:relative;
a {
height: 100%;
display: block;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
}
.item-container {
/*...*/
}
}
Like this you can still benefit from some table cell properties like vertical-align.(Tested on Chrome)
Problems:
(User: Kamal) It's a good way, but you forgot the vertical align problem! using this way, we can't put the link exactly at the center of the TD element! even with vertical-align:middle;
(User: Christ) Your answer is the best answer, because there is no any align problem and also today JavaScript is necessary for every one... it's in every where even in an old smart phone... and it's enable by default...
My Suggestion to complete answer of (User: Christ):
HTML:
<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>
CSS:
a.LN1 {
font-style:normal;
font-weight:bold;
font-size:1.0em;
}
a.LN2:link {
color:#A4DCF5;
text-decoration:none;
}
a.LN3:visited {
color:#A4DCF5;
text-decoration:none;
}
a.LN4:hover {
color:#A4DCF5;
text-decoration:none;
}
a.LN5:active {
color:#A4DCF5;
text-decoration:none;
}
you can give an <a> tag the visual behavior of a table cell:
HTML:
<table>
<tr>
Cell 1
<td>Cell 2</td>
</tr>
</table>
CSS:
tr > a {
display: table-cell;
}
I have seen this before when people are trying to build a calendar. You want the cell linked but do not want to mess with anything else inside of it, try this and it might solve your problem.
<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
Not exactly making the cell a link, but the table itself. I use this as a button in e-mails, giving me div-like controls.
<a href="https://www.foo.bar" target="_blank" style="color: white; font-weight: bolder; text-decoration: none;">
<table style="margin-left: auto; margin-right: auto;" align="center">
<tr>
<td style="padding: 20px; height: 60px;" bgcolor="#00b389">Go to Foo Bar</td>
</tr>
</table>
</a>
If you want use this way in php Do the following
<?php
echo ("
<script type = 'text/javascript'>
function href() {
location.href='http://localhost/dept';
}
</script>
<tr onclick='href()'>
<td>$id</td>
<td>$deptValue</td>
<td> $month </td>
<td>100%</td>
</tr>
");
?>