This little issue is starting to do my head in, I have read around a lot and have never had an issue with this in the past but I cannot seem to get the second div to appear on the right side of the table cell, any help would be appreciated.
My Markup is
<td>
<div class="sort">
ID
<span class="icon1"></span>
</div>
<div class="divider icon2"></div>
</td>
And my css is
thead .sort a {
color: #fff;
float: left;
}
thead .sort {
float: left;
}
thead .divider {
float: right;
}
I am expecting this is something simple or something I am just overlooking.
Thanks,
table .sort a {color: #f00; float: left;}
table .sort {float: left; border:1px solid #093;}
table .divider {float: right; border:1px solid #00F;}
and
<table width="100%" border="0">
<tr>
<td>
<div class="sort">
ID
<span class="icon1"></span>
</div>
<div class="divider icon2">icon</div>
</td>
</tr>
</table>
works.
Note I just added a couple of borders to the CSS.
But then I just tried your code and that works here too.
Using THEAD or TABLE in the CSS seems to make no difference. Is it possible you have another style clashing with those used for the table?
Anyway, with the above CSS (referencing table .SORT instead of THEAD .sort), adding THEAD tags around a row in the HTML doesn't affect it.
Hope that helps.
you are using <thead> in your CSS and yet in the Html, you are using <td>. Try use <thead> in your Html
Related
I'm trying to create a basic form, including a table, at the beginning of an Angular project, but I can't get the columns to align.
I've tried all manner of permutations with the styling for HTML <table> elements <table>, <tr>,,,width, 'float' etc., and have tried using vertical bars`.
My code borrow heavily from a W3Schools page, https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro, so it's strange that it doesn't align (not only don't the columns align, but the alternate row coloring also doesn't work).
<style>
table {
border-collapse: collapse;
width: 5%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
width: 50%;
}
tr {
width: 100%;
}
tr:nth-child(even) {
background-color: #522a2a;
}
</style>
<form style="margin-left: 2%; margin-right: 2%">
<h3>Form</h3>
<table>
<tr>
<th>Category</th>
<th>Input</th>
</tr>
<div *ngFor="let key of memberKeys">
<tr>
<td>{{key}}</td>
<td><input type="text" [(ngModel)]="member[key]" [ngModelOptions]="{standalone: true}"/></td>
</tr>
</div>
</table>
<button type="submit">Submit</button>
</form>
Not sure why the columns don't align, and the rows don't alternate background color. Many thanks for some advice!
There is a div where the table expects a valid child element such as tr:
<table>
<tr>[...]</tr>
<div *ngFor="let key of memberKeys">
Try moving the div to another location so that the table rows are all siblings.
I need help with some CSS styling.
I have made a table with 2 rows, and 2 columns, but the first column in the first row has a rowspan of 2. That creates a table like this: http://i.imgur.com/UjdSwu5.png, which is fine.
My problem is that when I try to apply padding to the 'name' and 'id' cells (but not the image cell), only the name cell gets padded. Here is a screenshot of no padding: http://i.imgur.com/0CGVhDL.png, and here is a screenshot of when I try to pad both cells: http://i.imgur.com/ipvHv2M.png
HTML:
<div id="body">
<div>
<div>
<div>
<div id="content">
<div id="items">
<ul class="list">
<li>
<table border="0">
<tr>
<td rowspan="2"><a href="index.html"><img
src="images/Stone.png" alt="Image" height="50" width="50"></a>
</td>
<td>
<h3 class="name">Stone</h3>
</td>
</tr>
<tr>
<td>
<p class="id">1</p>
</td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#content td h3 {
padding:5px 1px 5px 30px;
}
#content td p {
padding:5px 1px 5px 30px;
}
If I do the following then the id cell gets padded how i want it to, but it also pads the img cell.
#content td {
padding:5px 1px 5px 30px;
}
What am i doing wrong?
you are simply applying padding to the wrong element.
you are applying a padding to the h3 and p elements inside #content td but what you really want to do is apply the padding to the cell which is td.
In order to that properly, you need to identify your cells, like this:
<td class="name">
<h3>Stone</h3>
</td>
and
<td class="id">
<p>1</p>
</td>
and the CSS should be something like this
#content td.name {
padding:5px 1px 5px 30px;
}
#content td.id {
padding:5px 1px 5px 30px;
}
Also, a good practice would be not to name a class as id that could be very confusing afterwards.
I would advise calling it item-id instead, for example.
<td class="item-id">
<p>1</p>
</td>
#content td.item-id {
padding:5px 1px 5px 30px;
}
First of all, I suggest using the class-name of the elements, to style them.
Here's the css which should do what you want:
.name, .id{
padding: 80px;
}
In this fiddle, you can see a working solution: http://jsfiddle.net/63eUh/
As Kevin Smouts already said, you applied the padding to the wrong Element - which can easly happen, when you are adressing Elements in this way - it's difficult to read.
Whenever you change your HTML-structure, you have to care about css and update it as well. So I really don't recommend putting all your html-tree inside css to reach the correct elements.
Hello all I'm just trying to have my border around my table cell right around the text...not stretched the length of the entire table. Its the section with the border around it
CSS:
table.content_table {
width: 100%;
margin: 0px;
border-collapse: collapse;
}
table.content_table > tbody > tr > td.results {
border: 2px solid;
background-color: #eeeecc;
font-size: 8pt;
font-weight: bold;
PADDING: 0px;
}
HTML:
<table class="content_table">
<br/><br/>
<h1>Planned Vs Actual Productions Drilldown</h1>
<tr>
<td class="results">
Number of results returned: ${fn:length(beans)}
</td>
</tr>
give the text a simple span or any other block element like div p ... span with inline-block is also a block element which can have a border.
table.content_table {
width: 100%;
margin: 0px;
border-collapse: collapse;
}
.border {
border: 2px solid;
background-color: #eeeecc;
font-size: 8pt;
font-weight: bold;
PADDING: 0px;
display: inline-block;
}
Any Element inside a table needs to be in TD so that is is valid html... put another tr > td into your table like this
<table class="content_table">
<tr>
<td>
<h1>Planned Vs Actual Productions Drilldown</h1>
</td>
</tr>
<tr>
<td class="results">
<span class="border">Number of results returned: ${fn:length(beans)}</span>
</td>
</tr>
</table>
The answer lies in the fact that you have table width as 100%. Without any of styling at the TD level, the TD is automatically going to take the most width it can.
The bigger question though, is why you are using a table at all. This is a single column of data, no need for a table here, just use div's.
I had a similar problem with a WordPress theme. The "collapse" wasn't entirely working on the first column, because my theme's style.css "reset" had set the table width to 100%. At least for me, the "auto" width solved the problem.
<style>
table#donations { border-collapse: collapse; width:auto; }
</style>
<table id="donations">
<tr><td>Bitcoin BTC</td><td>1Prh5VnUJRQV3sARhEfQAMKv9UzGqgAMXg</td></tr>
</table>
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: ...
I'm trying to achieve table similar to this using css/html only. Is it possible ?
So the white area is the places table. This is the HTML for the table :
<table class="places">
<tr>
<td class="solid">K</td>
<td> </td>
<td> </td>
<td class="solid">P</td>
<td> </td>
</tr>
<tr>
<td class="solid">25</td>
<td class="solid">26</td>
<td> </td>
<td class="solid">47</td>
<td class="solid">48</td>
</tr>
(...)
</table>
And my css :
.places{
position:relative;
background:white;
width:160px;
margin:0 auto;
text-align:left;
padding:5px;
border-collapse: collapse;
}
.places tr {
}
.places td {
width:22px;
height:22px;
text-align:center;
}
.solid {
border: 1px solid #d2cdd1;
border-top:none;
background-color:#e7e7e7;
text-align:center;
cursor:pointer;
}
I was pretty sure, that although tables are a bit different than other html objects, padding should work here. But it looks that I was wrong. Cellspacing/cellpading have no effect. Currently I was able to get something looking like this :
You need the border-spacing property.
Table cells are not like other elements, because while div and p gets are block level elements, and span and input are inline, table cells and rows get their own table-cell and table-row display values.
Using border-spacing with border-collapse: separate will give you what you'd need. Have a look: http://jsfiddle.net/kjag3/1/
PS. I've also taken the liberty of cleaning up the HTML by separating them into two tables, so you won't need the fillers for the empty cells.
The reason you can't set any spacing between the cells is that you have border-collapse set to collapse in the styles for your table. If you use border-collapse:separate instead, you should be able to add margins to your table cells and put spacing between them.
Using border-collapse:collapse makes it so that adjacent table cells use the same border; naturally, you wouldn't be able to put space between two elements when they're attached to each other.
I wonder whether a table structure is appropriate for what you're trying to achieve?
To me, it looks like the 'K' and 'P' are headings, and the gap between the 'K' and 'P' numbers suggests that 'K' and 'P' are separate and shouldn't be part of the same table. So I suggest getting rid of the table and restructuring your HTML to use simple headings and div tags like this:
HTML:
<div class="places">
<h2>K</h2>
<div>25</div>
<div>26</div>
<div>23</div>
<div>24</div>
<div>21</div>
<div>22</div>
</div>
<div class="places">
<h2>P</h2>
<div>47</div>
<div>48</div>
<div>45</div>
<div>46</div>
<div>43</div>
<div>44</div>
</div>
CSS:
.places {
width: 55px;
float: left;
margin: 0 25px 0 0;
}
.places h2, .places div {
width: 22px;
height: 22px;
margin: 0 3px 3px 0;
border: 1px solid #d2cdd1;
border-top:none;
background-color:#e7e7e7;
text-align:center;
cursor:pointer;
font-weight: normal;
font-size: 12pt;
}
.places div {
float: left;
}