It seems to me that I horribly missing something here but I can't get the cell
of the following table to span across the whole table with. See following jsfiddle link attached:
http://jsfiddle.net/jeremysolarz/5stQc/2/
I know table design isn't nice but I'm working with a legacy application here with a lot of
gif spacer images and I want to remove this and switch to a more CSS centered layout.
Please help.
Is it necessary to have a nested table in this case? If you just had a single table and used <th colspan="3"> would this solve the issue? Sorry if this is not the case but it seems like you are overcomplicating it!
You are currently declaring the width of the table inline(in the html) and in the CSS and both values are different, you should wrap the tables in a div as follows, and remove the inline width declaration.
/* frames */
#foo{
width:100%;
display: inline-block;
}
.newframeContainer {
padding:0;
margin:0 auto;
text-align: left;
width:70%;
height: auto;
border:none;
-moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
border: 1px solid #B6B6B6;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
The Html should now look like this:
<div id="foo">
<table height="100%" class="newframeContainer" cellspacing="1">
<tbody>
<tr height="27">
<th colspan="3">
ADAM Statistics
</th>
</tr>
<tr height="99%">
<td class="text-bold">Total Project Budgets [USD] </td>
<td>test</td>
<td valign="top" align="right">
192,609,012
</td>
</tr>
<tbody>
</table>
</div>
Related
In HTML I'm creating a table and make the whole cells in each row clickable. The cells are linked to a page with more details to each bill.
The cells in each row are a <a href ...>. The hyperlink on each cell are working fine, but not on the border.
Sadly I'm not allowed to show images here. https://i.imgur.com/Ti7O7pP.png
To change the cursor-arrow to cursor-pointer I already did this:
.borderCursor:hover {
cursor: pointer !important;
}
But it's just optical.
I made dat fiddle for you:
https://jsfiddle.net/otenmoten/s8reyktm/
I expect to click on the border of a cell and then redirected to the details page.
How to do?
Final solution with Thymeleaf:
<tr th:onclick="|location.href = '#{...}'|" class="dataRow">
<td> ... </td>
<td> ... </td>
..............
</tr>
You can also use box-shadow like this:
-webkit-box-shadow: inset 0px 0px 0px 3px #f00;
-moz-box-shadow: inset 0px 0px 0px 3px #f00;
box-shadow: inset 0px 0px 0px 3px #f00;
Make sure you add this style to the anchor tag
In addition to #Zohaib's comment, you can add below to keep the space inside <a>
.borderCursor a {
box-sizing: content-box;
padding: 3px;
}
Are u expecting like this:
.makeBorder {
border: 10px solid green;
}
.borderCursor:hover {
cursor: pointer !important;
}
td{
padding:5px;
}
<html>
<head>
</head>
<body>
<table>
<tr>
<td >
<a class ="makeBorder borderCursor" href = "www.google.de">KLICK ME [--1--]</a>
</td>
<td>
KLICK ME [--2--]
</td>
<td>
KLICK ME [--3--]
</td>
</tr>
<tr>
<td>
KLICK ME [--4--]
</td>
<td>
KLICK ME [--5--]
</td>
<td>
KLICK ME [--6--]
</td>
</tr>
</table>
</body>
</html>
If you do want add padding for td u can remove it.
Try to make it like this:
<td onclick="location.href ='https://www.page.com'">
I want to remove horizontal lines from my HTML table
I have tried using CSS like border-bottom and border-top and set the value to 0 but that didn't change; whereas border-right and border-left working perfectly.
tr {
border-bottom: 0;
/* border-bottom:none; */
}
<table style="border:1px solid black;">
<tr>
<td style="padding:0px 15px 0px 65px;"><strong>Type</strong></td>
<td style="padding:0px 15px 0px 20px; "><strong>Quantitiy</strong></td>
<td style="padding:0px 15px 0px 0px;"><strong>price</strong></td>
<td style="padding:0px 15px 0px 0px;"><strong>total price</strong></td>
</tr>
<tr class="type">
<td style="padding:5px 15px 0px 65px;">{{type}}</td>
<td style="padding:5px 15px 0px 20px;">{{meters}}</td>
<td style="padding:5px 15px 0px 0px;">{{price}}</td>
<td style="padding:5px 15px 0px opx;">{{price_total}}</td>
</tr>
</table>
I want to remove those horizontal lines using CSS like border-bottom but failed.
i have just added psuedo code
this is how actually my table looks like
i want to remove those horiazontal line from cloth,shirt,pants straight away to the bottom for all the columns as well
table, th, td {
border-collapse: collapse;
}
td{
border:1px solid black;
border-top: none;
border-bottom: none;
}
This should do the work
Try to add style to td element. Not to tr.
I'm making this site for my friends mom and for some reason my links aren't working in my table, I have reason to believe that it has something to do with the CSS, also I've never had this problem before so I'm not fully sure how to fix it. The code works in Chrome but not Firefox also to clarify, I can't click on the link, it turns it blue and underlines it but I just generally can't click on it at all.
HTML
<nav>
<table id="nav_table">
<tr>
<td class="nav_border">
<p class="nav_options">Home</p>
</td>
<td class="nav_border">
<p class="nav_options">Restaurants</p>
</td>
<td class="nav_border">
<p class="nav_options">Near you</p>
</td>
<td class="nav_border">
<p class="nav_options">Order Here!</p>
</td>
</tr>
</table>
</nav>
CSS
nav{
position: relative;
top: 50px;
}
#nav_table{
position: relative;
top: 60px;
margin-left:auto;
margin-right:auto;
border-spacing: 5px 0px;
border-collapse: ;
height: 0px;
}
.nav_border{
text-align: center;
border: 2px solid black;
padding: 10px;
width: 120px;
height: 0px;
-webkit-box-shadow: rgb(,,) 0px 0px 0px ;
-moz-box-shadow: rgb(,,) 0px 0px 0px ;
box-shadow: rgb(,,) 0px 0px 0px ;
background:-webkit-radial-gradient(center,circle,red 0%, orange 50%);
background:-moz-radial-gradient(center,circle,red 0%, orange 50%);
background:radial-gradient(center,circle,red 0%, orange 50%);
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
.nav_options{
font-size: 20px;
text-decoration:none;
}
Now as I said before I've never had this problem, I've tried googling it and it said it had to do with changing the parent element width and height to percentage instead of pixels but I don't think it applied to what I'm trying to get done.
You need to put 'http://' in front of your urls, so the browser knows it is an absolute URL.
e.g. href="http://www.google.com"
Without, the browser thinks the URL is relative so it's taking you to the wrong page.
It's also better backwards compatibility to put your anchor tags inside your paragraph tags.
<p class="nav_options">Home</p>
Your syntax is not correct. If you want link with text you should first try this
link text
<nav>
<table id="nav_table">
<tr>
<td class="nav_border">
Home</p>
</td>
<td class="nav_border">
<p class="nav_options">Restaurants</p>
</td>
<td class="nav_border">
<p class="nav_options">Near you</p>
</td>
<td class="nav_border">
<p class="nav_options">Order Here!</p>
</td>
</tr>
</table>
</nav>
Your cod isn`t correct , you must add < a > < / a > tag in to < p > < / p >
if you want clickable cell use it CSS for a tag :
a.Click {
width:100%;
height:100%;
display:block;
text-align:center
}
I'm working on a mobile site targeting older phones that have limited CSS \ html support and so I'm reverting to tables.
What I'm trying to achieve on a particular page is to have a table row with a heading of a particular value and then another row in the same table with the value and a link to edit
The problem is that the heading spans only one column and I would like to be able to style it so that there is some padding and margins as well as a border.
Can someone provide some advice on how to do this?
HTML
<div class="navalt">
<table style="width:100%;">
<tbody>
<tr class="edHeading">
<td><fmt:message key="editprofile.location"/></fmt:message></td>
</tr>
<tr>
<td class="leftTd">USA</td>
<td class="rightTd">Edit</td>
</tr>
CSS
.navalt {
text-align:center;
padding: 4px 0px 4px 4px;
border-top: thin solid #C5C9D1;
border- bottom: thin solid #C5C9D1;
}
.edHeading {
padding: 4px 0px 4px 4px;
background-color:#E9E1FF;
}
.leftTd {
border-right: thin solid #C5C9D1;
padding: 0px 0px 0px 5px;
text-align:left;
width:50%;
}
.rightTd {
padding: 0px 5px 0px 0px;
text-align:right;
width:50%;
}
As Wabs said, you could just add a colspan to your td in the heading.
Another way, which will allow you to separate your styling more, is to use the thead tag - seeing as you have used <tbody> this would make more sense.
Also - as a side note, you have no closing tags for your div and body and table - though i assume this is because you only copied part of your code..?
Here is a fiddle: http://jsfiddle.net/f6NKt/2/
the code is as:
HTML
<table style="width:100%;">
<thead>
<tr>
<th colspan="2">Heading - location use th tags</th>
</tr>
</thead>
<tbody>
<tr>
<td class="leftTd">USA</td>
<td class="rightTd">Edit</td>
</tr>
</tbody>
</table>
and CSS - notice use of thead instead
.navalt {text-align:center;padding: 4px 0px 4px 4px;border-top: thin solid #C5C9D1;border- bottom: thin solid #C5C9D1;}
thead {padding: 4px 0px 4px 4px;background-color:#E9E1FF;}
thead th {font-size:20px;}
.leftTd {border-right: thin solid #C5C9D1;padding: 0px 0px 0px 5px;text-align:left;width:50%;}
.rightTd {padding: 0px 5px 0px 0px;text-align:right;width:50%;}
Unless I'm missing something, could you not add colspan=2 to the header <td> so it spans your entire table?
<tr class="edHeading"><td colspan="2"><fmt:message key="editprofile.location"/></td></tr>
I built a table that utilizes the caption element; there's box-shadows around the table, and by default the caption is placed atop the table, outside of the box-shadows. I am trying to get the caption to fall inside the box-shadows. I changed the caption's display to display:table-header-group, which does place it inside the table, however that "broke" the layout I desire....you can see it here: http://jsfiddle.net/jalbertbowdenii/YraVE/ (I only viewed this in chrome) the first column takes up much more width than the other columns. Anybody know of a solution that will place the caption within the table while at the same time not shift column width?
CSS:
table{border-collapse:collapse; border-spacing:0; padding-top:0.5em; padding-bottom:0.5em; margin:0.8em auto; -moz-box-shadow:0 0 4px #000; -ms-box-shadow:0 0 4px #000; -o-box-shadow:0 0 4px #000; -webkit-box-shadow:0 0 4px #000; box-shadow:0 0 4px #000; color:#000; width:80%}
.captionx{display:table-header-group}
HTML:
<h1>Caption Default <code>display:table-caption</code></h1>
<table summary="Summary of Table Data">
<caption>Caption for Table</caption>
<thead><tr><th>Sun</th><th>Mon</th><th>Tues</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead>
<tfoot><tr><td colspan="7"><p>Table Footer</p></td></tr></tfoot>
<tbody>
<tr><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td></tr>
</tbody>
</table>
<hr />
<h1>Caption set to <code>display:</code></h1>
<table summary="Summary of Table Data">
<caption class="captionx">Caption for Table</caption>
<thead><tr><th>Sun</th><th>Mon</th><th>Tues</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead>
<tfoot><tr><td colspan="7"><p>Table Footer</p></td></tr></tfoot>
<tbody>
<tr><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td></tr>
</tbody>
</table>
I just ran into the same issue and got to this question. If you are sure that your caption will be only one line (i.e. you know it's height) you can try setting it to position:absolute and the table to position:relative with a padding-top equal to the height of the caption.
table {
position: relative;
padding-top: 20px;
}
caption {
position: absolute;
top: 0;
left: 0;
height: 20px;
line-height: 20px;
}