I have a very simple HTML table which has one row and two cells. The first cell has a hyperlink which should cover both cells. How could I get my hyperlink to cover the second td of my table?
Here is my HTML code:
<table>
<tr>
<td style="width:100px;padding:0">
Yes
</td>
<td style="width:30px;padding:5px">Oh yeah</td>
</tr>
</table>
Now my hyperlink only covers the first td, but not the second one. What could be done?
I do not want to use JavaScript. I do not want to copy the link to both table cells.
as a link in each td is not a good alternative and using js is a bit dirty, here is another html/css approach:
HTML:
<div class="table">
<a class="table-row" href="/mylink">
<div class="table-cell">...</div>
<div class="table-cell">...</div>
<div class="table-cell">...</div>
</a>
CSS:
.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }
Here is a working JSFiddle
Personally, I would prefer to put a seperate link in each td that points to the same URL, to keep things simple:
<table>
<tr>
<td>
<a href="http://url/stuff">
First column
</a>
</td>
<td>
<a href="http://url/stuff">
Second column
</a>
</td>
</tr>
</table>
<table style="position: relative">
<tr>
<td style="width:100px;padding:0">
Yes
</td>
<td style="width:30px;padding:5px">Oh yeah</td>
</tr>
</table>
By making the link absolute you pull it out of it's layer and by giving it a width of 100, the link extends to the next TD element.
To prevent the anchor tag from overflowing, give the table a relative position to confine the absolute element to the table width.
Here is a JSFiddle
Related
I'm trying to write some HTML/CSS to display a certain row with some of the elements left-aligned and some of them in the center. This was my HTML code:
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<div class="mid">
<td> Subtotal </td>
<td> Tax </td>
<td> Total </td>
</div>
</tr>
And this is my CSS code:
.mid {
text-align: center;
}
.mainInfo {
font: bold 13px Tahoma;
}
#header {
background-color: #68891;
color: white;
}
But the last three elements are not moving to the center, and I really don't understand why not. I tried putting class="mid" in the <td> tags and that worked, but doesn't that defeat the purpose of DRY?
Fiddle Demo
You cannot put a div instead of td element.
You should validate your HTML code with w3 validator.
If you'll do so you'll see you get this error message:
document type does not allow element "DIV" here; missing one of "TH", "TD" start-tag
Maybe you can do it this way:
<table>
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<td class="center">Subtotal</td>
<td class="center">Tax</td>
<td class="center">Total</td>
</tr>
</table>
JSFiddle example
No, you should not put divs inside tr's or tables.
And you should not use tr's or td's without table-element.
<table>
<tr>
<td>hello world</td>
<!-- This is bare minimum to use tables properly -->
</tr>
</table>
You can insert whatever(not tr or td, but could start new table) you want inside TD-elements though.
It's possible to use other elements to replace these standard ones with css display-property set to table-row etc., but you should stick to conventional tags.
Use colspan/rowspan to span over multiple table columns or rows.
CSS classes are designed to be used as often you need/want to. Only IDs should appear once per page.
Of course you should always keep the DRY concept in mind but in your case it's totally fine. It wouldn't if you would set your .mid class to every <td> because in that case you could just set the properties directly to the <td> element.
middle is not a valid value for text-align, so I'm going to assume, in your CSS, that's meant to be vertical-align. If so, it's because vertical-align will only apply to table cells, not divs - that would explain why it is only being successfully applied to your tds.
Additionally, you shouldn't really put a div inside a table (and shouldn't put a td inside of that) but that's not related to your problem.
Assign one class for left alignment and other for center like so...
.left {
text-align:left;
}
.center {
text-align:center;
}
Asign class to TD elements
<tr class="mainInfo" id="header">
<td class='left'> Item </td>
<td class='center'> Color </td>
</tr>
Hi am trying to add a div above every <tr> but when i look at the html console the div are showing outside the table. below is the html code.
<table>
<div>
<tr><td></td></tr>
</div>
<div>
<tr><td></td></tr>
</div>
</table>
Is this not allowed? any help would be great.
<div> tag can not be used above <tr> tag. Instead you can use <tbody> tag to do your work. If you are planning to give id attribute to <div> tag and doing some processing, same purpose you can achieve through <tbody> tag. <div> and <table> are both block level elements. so they can not be nested.
For further information visit this page
For example:
<table>
<tbody class="green">
<tr>
<td>Data</td>
</tr>
</tbody>
<tbody class="blue">
<tr>
<td>Data</td>
</tr>
</tbody>
</table>
secondly, you can put "div" tag inside "td" tag.
<table>
<tr>
<td>
<div></div>
</td>
</tr>
</table>
Further questions are always welcome.
You can't put a div directly inside a table but you can put div inside td or th element.
For that you need to do is make sure the div is inside an actual table cell, a td or th element, so do that:
HTML:-
<tr>
<td>
<div>
<p>I'm text in a div.</p>
</div>
</td>
</tr>
For more information :-
http://css-tricks.com/using-divs-inside-tables/
No, you cannot insert a div directly inside of a table. It is not correct html, and will result in unexpected output.
I would be happy to be more insightful, but you haven't said what you are attempting, so I can't really offer an alternative.
You can not use tag to make group of more than one tag. If you want to make group of tag for any purpose like in ajax to change particular group or in CSS to change style of particular tag etc. then use
Ex.
<table>
<tbody id="foods">
<tr>
<td>Group 1</td>
</tr>
<tr>
<td>Group 1</td>
</tr>
</tbody>
<tbody id="drinks">
<tr>
<td>Group 2</td>
</tr>
<tr>
<td>Group 2</td>
</tr>
</tbody>
</table>
In the html tables, <table> tag expect <tr> tag right after itself and <tr> tag expect <td> tag right after itself. So if you want to put a div in table, you can put it in between <td> and </td> tags as data.
<table>
<tr>
<td>
<div>
<p>It works well</p>
</div>
</td>
</tr>
<table>
If we follow the w3 org table reference ,and follow the Permitted Contents section, we can see that the table tags takes tbody(optional) and tr as the only permitted contents.
So i reckon it is safe to say we cannot add a div tag which is a flow content as a direct child of the table which i understand is what you meant when you had said above a tr.
Having said that , as we follow the above link , you will find that it is safe to use divs inside the td element as seen here
A div cannot be added inside tr but there's an alternate solution here.
I tried adding a div inside tr but it seems a td should be the immediate child of a tr for it to work properly.
Adding a div inside td works fine.
I suppose you are trying to add some background or border-radius for the whole tr. Here's how I achieved the similar result in my project.
I'm using colspan and flex property to achieve that.
.flex-container{
display: flex;
margin: 5px;
}
table{
border: 1px solid red;
}
tr{
border: 1px solid green;
padding: 5px;
}
.flex-container .col{
box-sizing: border-box;
border: 1px solid;
padding: 5px;
border-radius: 5px;
margin: 5px;
background: skyblue;
}
<table>
<tr>
<!-- Assuming you have 4 columns -->
<td colspan="4">
<div class="flex-container">
<div class="col"> Item 1 </div>
<div class="col"> Item 2 </div>
<div class="col"> Item 3 </div>
</div>
</td>
</tr>
</table>
The problem will happen whenever it will render on small device. Element <div> inside <td> will occurs in mobile responsive screen.
You could use display: table-row-group for your div.
<table>
<div style="display: table-row-group">
<tr><td></td></tr>
</div>
<div style="display: table-row-group">
<tr><td></td></tr>
</div>
</table>
Iam trying to add html piece of code to an existing html page. I am trying to use a DIV inside TD, then display:inline css attribute for DIV, doesn't work as expected. Any reason why ?
<table>
<tr>
<td width="20%" class="oddrow"></td>
<td width="80%" class="oddrow-l">
<div style="display: inline;"> Hello</div>
<div style="display: inline;">
Hiii
</div>
</td>
</tr>
</table>
You have to set width for your table:
table {
width: 100%;
}
http://codepen.io/anon/pen/LKizB
add your display:inline to the td style as well. http://jsfiddle.net/v5Ld3/
<table>
<tr>
<td width="20%" class="oddrow"></td>
<td width="80%" class="oddrow-l" style"display: inline">
<div style"display: inline">Hello</div>
<div style"display: inline">Hiii</div>
</td>
</tr>
</table>
Use <span> instead of <div>. Also as others mentioned your table nor td have width defined, so they will use as small width as possible. span is inline anyway and could change that.
If you don't want the whole table being width: 100% you may just set width for the problematic column.
I have the following example
<table align="right" border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<div style="width: 100%; background-color: red">
test
</div>
If the code is run, the div will enter the floated table. The table will need to be floated so this can't change. Is there a way to stop the other content entering the floated element?
One solution is to give the table an explicit background color.
<table style="background:white; float:right" ...
See new JSFiddle.
The other answers all change other properties such as the relative widths or positions of the div and the table.
Try not to use depreciated HTML tags like align and border. Cellpadding and cellspacing can also be achieved with styles but I'll leave that as an exercise :) This will make the div take up as much space as is needed. If you know the size of the parent div which the table and this div are contained in, just set the width of the table and div to a fixed value.
<table style="float:right; border: 1px solid black;" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<div style="float:left; background-color: red">
test
</div>
http://jsfiddle.net/Shnjt/
use this
<div style="90%; margin-left:auto; margin-right:auto;">
<table style="float:right;width:45%">
</table>
<div style="width:45%;background-color: red; float:left;">
test
</div>
</div>
If you want div and table to be floated you need to set width for both and css: float: left to the div and float: right to the table.
Otherwise you can try removing width:100% from your div and adding display: inline-block.
There is a css property that controls whether an element respect the previous floating element.
Here is the documentation: http://www.w3.org/wiki/CSS/Properties/clear
I do not know what you want to get, but that might help.
# Mr.Lister....
<div style="width: 100%; background-color: red;float:left;">
test
</div>
Float:left; will be helpful to your code.
Good Luck!
I'm having a bit of an issue getting some stylesheet behavior that I want. I'm not even sure if it's possible. Basically I'm attempting to place a table with a variable number of cells with static cell width in a DIV with overflow: auto, and my goal is that when the tables width extends past the width of the container DIV that it becomes scrollable.
This isn't the case. The cells get shrunk together. A very basic representation (with inline styles for ease on this; not actually in the application haha) of the code:
<div style="width: 1000px; overflow-x: auto;">
<table>
<tr>
<td style="width:400px;">
This
</td>
<td style="width:400px;">
Should
</td>
<td style="width:400px;">
Scroll!
</td>
</tr>
</table>
</div>
Is there anyway I can do this with CSS, or am I going to have to go back to setting the width inline on a second div containing the table through calculations?
Works if you set the width on the table itself.
<table style="width:1200px;">
The td will always shrink to the necessary size, they won't push the table wider in that situation.
using CSS can done like below but make sure you use id or class for applying css if you have more then one table or div.
<style>
div { width: 400px; overflow-x: auto; }
table { width:1200px; }
table td { width:400px; }
</style>
<div>
<table>
<tr>
<td>
This
</td>
<td>
Should
</td>
<td>
Scroll!
</td>
</tr>
</table>
</div>
This should help
<table style="width: max-content;">