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!
Related
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 a table with 2 columns
<table border="2">
<tr>
<td>
<div id="menupage" >
...
...
</div>
</td>
<td align="center" >
<div id="contentpage" >
...
...
</div>
</td>
</tr>
</table>
I want to keep always in top not in center if the size of <div id="contentpage" > is big
You can use the CSS vertical-align property to align the TD contents to the TOP:
vertical-align:top;
See this working Fiddle Example!
e.g.,
<table border="2">
<tr>
<td style="vertical-align:top;">
<div id="menupage">
...
</div>
</td>
<td align="center" style="vertical-align:top;">
<div id="contentpage" >
...
</div>
</td>
</tr>
</table>
You probably are looking at valign or vertical-align.
<td align="center" valign="top">
<div id="contentpage">
</div>
</td>
See http://jsfiddle.net/nivas/Y84pS/
Note that valign is a deprecated attribute (so are align and border. See Index of Attributes for a complete list.). The recommended way to get these functionality is via CSS, using vertical-align, text-align and border.
The second table in my jsfiddle example uses CSS, and gets the same functionality.
If you're going to use tables then you might as well just use valign.
eg: <div id="menupage" valign="top">
If you want to use CSS you can use vertical-align.
You could set all td's in your stylesheet like so:
td {
vertical-align: top;
}
I've no idea of your experience etc so I won't go on, but you should avoid tables for layout. You'll save yourself a lot of downvotes and "don't use tables" comments.
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;">
Here is a 3x3 table:
<html>
<body style="overflow:hidden;">
<style>
div.table_div {overflow:scroll;width:378px;height:117px;position:relative;}
table.TheTable {width:361px;height:100px;table-layout:fixed;border-collapse:collapse;border:1px solid #000000;}
td.TheTableColumnCell {font-size:16px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;border:1px solid #000000;}
</style>
<div class="table_div" id="table_div">
<table class="TheTable">
<tr id='firstTr'>
<td class="TheTableColumnCell">
<div onclick="alert('1');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:0px;top:4px;width:60px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 1</div>
<div onclick="alert('2');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:90px;top:4px;width:30px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 2</div>
<div onclick="alert('3');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:150px;top:4px;width:210px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 3</div>
</td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell">I'm</td>
<td class="TheTableColumnCell">Vertically</td>
<td class="TheTableColumnCell">Aligned Middle!</td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
</table>
</div>
</body>
</html>
If you cut-and-paste that code into an html file and open it in your browser, you will see that the div's act as an overlay onto my grid. This is sort-of like a Scheduling control (the grid represents each hour block).
The thing that's driving me crazy is that the I can't get the text inside the div tags to become vertically aligned in the middle. The actual td tags, no problem. But the div tags inside the td tag - nope!
I've read and tried everything here: http://phrogz.net/css/vertical-align/index.html
I've tried (as a style for the div): padding, margins, line-heights, etc.
EDIT: I think there is some confusion on the intent of this grid. The reason I use the div tags is to overlay "the yellow bar" over the grid. That means there could be multiple "yellow bars" inside of one td cell or it can span multiple cells. For example, my original html (assuming the first column is 12:00 AM) has three events in that first row. Event 1: 12:00 AM - 12:30 AM. Event 2: 12:45 - 1:00 AM (both in the same cell). Event 3: 1:15 AM - 3:00 AM (and it has overlapped two cells). Stuff like that. That's why the div tags.
Is there a single line in the div, try setting the line-height of the container to the same as the height of the container.
<div onclick="alert('1');" style="position:absolute;font-size:16px;line-height:24px;background-color:#FFFF00;left:0px;top:4px;width:60px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 1</div>
Here's a dramatically cleaned up version of your code with what I think is the answer you're looking for.
Edit:
http://jsfiddle.net/FXFF8/24/
The position:absolute takes your divs out of the flow of the table, and makes them ignore the standard vertical-align.
You might be able to fixed it by using spans instead of divs, and using position:relative instead of absolute.
Something like this:
http://jsfiddle.net/3s4VE/
Assuming you are asking how to get the content of the divs vertically centered within the divs.
Set the line-height to be the same as the height. Right now you have line-height:14px; height:24px.
Here's what it looks like if you set line-height:24px: http://jsfiddle.net/NytYh/1/
adding the event to the "TD" instead of div's wouldn't work for you?
<html>
<body style="overflow:hidden;">
<style>
div.table_div {overflow:scroll;width:378px;height:117px;position:relative;}
table.TheTable {width:361px;height:100px;table-layout:fixed;border-collapse:collapse;border:1px solid #000000;}
td.TheTableColumnCell {font-size:16px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;border:1px solid #000000;}
</style>
<div class="table_div" id="table_div">
<table class="TheTable">
<tr id='firstTr'>
<td class="TheTableColumnCell">
<span onclick="alert('1');" style="font-size:16px;line-height:14px;background-color:#FFFF00;left:0px;top:4px;width:60px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 1</span>
</td>
<td class="TheTableColumnCell">
<span onclick="alert('2');" style="font-size:16px;line-height:14px;background-color:#FFFF00;left:90px;top:4px;width:30px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 2</span>
</td>
<td class="TheTableColumnCell">
<span onclick="alert('3');" style="font-size:16px;line-height:14px;background-color:#FFFF00;left:150px;top:4px;width:210px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 3</span>
</td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell">I'm</td>
<td class="TheTableColumnCell">Vertically</td>
<td class="TheTableColumnCell">Aligned Middle!</td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
</table>
</div>
</body>
</html>
I guess that I understood. rs.
you can try this code:
<td align="center" valign="middle">
The align define the horizontal alignement and the Valign define vertical one.
got it?
regards!
Try this: vertical-align:text-top; text-align:center
http://jsfiddle.net/UxZr3/2/