When I have placed the table inside the div element, there is 0.565px gap.
I want to place that table exactly on div.
<div style="width: 72.956%; border:1px solid; padding:25px">
<div>
<div>
<div style="padding:0px; margin:0px; border:1px solid" >
<table style="width: 100%; margin:0px; padding:0px; border:1px solid">
<tbody>
<tr>
<td>05/15/1991</td>
<td> ALKI</td>
<td>1 </td>
<td>$6.89</td>d>
<td> 1003 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
There might be a couple of reasons. Try using these and please give us more information if it's not working.
CSS:
div{
padding:0;
}
table{
width:100%;
}
Try cellpadding and cellspaceing 0
Set the div display as table
div
{
display :table;
}
then table exactly rendered on div element
Related
Currently I find myself a table that contains within it a div with a video player, but is moved around on the left side of the screen, I'd like to hit GrindPlayer, how can I do?
<style type="text/css" media="screen">
#GrindPlayer p{
text-align:center;
}
#GrindPlayer{
margin:0 auto;
}
</style>
<table width="100%" border="0" cellspacing="5">
<tr>
<td>
<div id="GrindPlayer">
<p>
Alternative content
</p>
</div>
</td>
</tr>
</table>
and if I can put the full table at the top of the screen. Thank you
If you want the div inside the table at the center, this is the solution.
#GrindPlayer p{
text-align:center;
}
#GrindPlayer{
margin:0 auto;
}
<table width="100%" border="1" cellspacing="5">
<tr>
<td>
<div id="GrindPlayer">
<p>
Alternative content
</p>
</div>
</td>
</tr>
</table>
I am having a hard time explaining in words what I am looking for, so here's an example:
http://jsfiddle.net/toaeb0zt/
<div style="width:800px ">
<div style="width:200px;height:500px; background:purple; float:left"></div>
<div style="width:200px;height:200px; background:blue; float:left"></div>
<div style="width:200px;height:200px; background:green; float:left"></div>
<div style="width:200px;height:400px; background:yellow; float:right"></div>
<div style="width:400px;height:200px; background:orange; float:left"></div>
<div style="width:200px;height:200px; background:brown; float:left"></div>
<div style="width:400px;height:200px; background:gray; float:left"></div>
<div style="width:200px;height:100px; background:red; float:left;"></div>
</div>
This layout was done with CSS combining left and right floats. I read about flexbox to see if it could do it, but seems like that's a negative.
I realize it could be done by nesting divs into bigger divs, but I need to make this responsive and this solution would make responsive a nightmare.
I have been trying to stay away from jQuery and deeper programming, but I understand it might be the best option. I appreciate this community's help; thank you in advance.
Would you are doing seems to me like a nightmare ! there are alot of libs out there that will help you get this grid together. A masonry grid would be the most aligned with your requirement.
masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
I have used Isotope alot ! this is one of the many things you can do with Isotope:
http://codepen.io/desandro/pen/mEinp
$( function() {
$('.isotope').isotope({
layoutMode: 'fitColumns',
itemSelector: '.item'
});
});
study the website very carefully
http://isotope.metafizzy.co/
Hope this helps/ this solution will require JavaScript (and jQuery)
You could use a table of blocks and just color each one. You can do this using css and a simple table.
Here is a fiddle, http://jsfiddle.net/r3vycfa1/
I'm not positive what your looking for, but this will be more responsive.
The classes .a, .b, .c each have a different color and you can apply them to the blocks.
HTML
<table>
<tr>
<td class="a"> </td>
<td class="a"> </td>
<td class="b"> </td>
<td> </td>
</tr>
<tr>
<td class="a"> </td>
<td> </td>
<td class="b"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="b"> </td>
<td> </td>
</tr>
<tr>
<td class="c"> </td>
<td class="c"> </td>
<td class="c"> </td>
<td> </td>
</tr>
</table>
CSS:
* {
margin: 0;
padding: 0;
}
table {
width: 500px;
height: 500px;
border-spacing: 0px;
}
td {
width: 10%;
height: 10%;
}
.a {
background-color: #00FF00;
}
.b {
background-color: #FF0000;
}
.c {
background-color: #0000FF;
}
I searched a lot, but now want to ask because I found no answer:
If have two div elements that should be located next to each other with full width (each exactly 50% of the full width). It could be that the first or the second div is hidden (style="display=none"). In this case the other div should be displayed in full width.
My solution is this:
<table style="width: 100%;">
<tr>
<td style="padding: 0px;">
<div id="div1">
...
</div>
</td>
<td style="padding: 0px;">
<div id="div2">
...
</div>
</td>
</tr>
</table>
That works almost perfect, BUT when both divs are displayed the first one seems to be 55% and the second one 45% of the width.
If course I can set the width of the div when hiding the other to 100%, but I want to avoid doing that.
Does anyone have a solution to make them both 50% when both are displayed.
A JQuery approach with no tables
You can achieve this with JQuery (or plain javascript) which I am assuming you are using to show/hide the elements anyway.
$("#ButtonOne").click(function () {
$(".one").toggle();
if($(".one").is(":visible")){
$(".two").css("width", "50%");
}
else{
$(".two").css("width", "100%");
}
});
$("#ButtonTwo").click(function () {
$(".two").toggle();
if($(".two").is(":visible")){
$(".one").css("width", "50%");
}
else{
$(".one").css("width", "100%");
}
});
The above JQuery assumes two buttons for toggling the visibility of the elements.
Here is an example
With the example, it should be noted that using 50% width with inline-block requires zero whitespace in between the elements. Hence the </div><div... requirement.
You will need some vertical-align:top; aswell to ensure the DIV elements stay in line.
Incase the link ever breaks, here is the accompanying HTML...
<div class="main">
<div class="one">this is one</div><div class="two">this is two</div>
</div>
<input type="button" id="ButtonOne" value="Toggle one" />
<input type="button" id="ButtonTwo" value="Toggle two" />
...and CSS...
body{
margin:0;
padding:0;
}
div{
margin:0;
padding:0;
}
.one {
background-color:red;
height:100px;
width:50%;
display:inline-block;
}
.two {
background-color:blue;
height:100px;
width:50%;
display:inline-block;
}
Can you place both divs in the same table cell?
<table style="width: 100%;">
<tr>
<td>
<div id="div1">
...
</div>
<div id="div2">
...
</div>
</td>
</tr>
</table>
You could simply toggle a class....
table { width: 100%; padding:0; }
td { padding:0; margin:0; }
td > div { width: 50%; display: block; float: left; height: 50px; cursor: pointer; }
#div1 {background: #a00;}
#div2 {background: #00a;}
.wide {width: 100%;}
.hide { display: none;}
and the jquery...
$('div').click(function () {
$(this).toggleClass('wide');
$('div').not(this).toggleClass('hide');
});
DEMO HERE
Would work for multiple divs easily: demo 2
Use table-layout:fixed:
EDIT:
You have to set the display:none on the td, not on the div.
<table style="width: 100%; table-layout:fixed">
<tbody>
<tr>
<td style="padding: 0px; width:50%">
<div id="div1" style="border: 1px solid black">
This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text
</div>
</td>
<td style="padding: 0px; width:50%; display: none;">
<div id="div2" style="border: 1px solid black">
This isn't as long as the other text.
</div>
</td>
</tr>
</tbody>
</table>
I've tested it on Chrome, Firefox and IE10
ok guys,
thanks for your help. now i found what i was searching for:
<table style="width: 100%;">
<tr>
<td id="td1" style="padding: 0px; min-width:50%;">
<div>
...
</div>
</td>
<td id="td2" style="padding: 0px; min-width:50%;">
<div>
...
</div>
</td>
</tr>
</table>
both td tags are next to each other and both take exactly 50%. when hiding td1 or td2, the other td goes into full width automatically.
best regards...
You can achieve this by setting width in the td itself, and when you want to hide any one div just add "display:none;" in the specified td instead of the div, then the remaining div will have 100% width.
<table style="width: 100%;">
<tr>
<td style="padding: 0px; width:50%;">
<div id="div1" >
hii
</div>
</td>
<td style="padding: 0px;width:50%;">
<div id="div2" style="">
byyee
</div>
</td>
</tr>
</table>
Whats the best way to split up a table element <td>? I don't really want to use nested tables. I need the internal element to have two elements one that is left justified and the other to be right justified with no border.
For example:
<table>
<tr>
<td>LEFT, RIGHT</td>
</tr>
</table>
any other ways to do this besides the following?
<table>
<tr>
<td>LEFT</td>
<td>RIGHT</td>
</tr>
</table>
I want the internal element to be a <span> or whatever is best for this.
<table>
<tr>
<td>
<div style="float:left">LEFT</div><div style="float:right">RIGHT</div>
</td>
</tr>
</table>
I would do something like:
<td><div class="left>LEFT</div><div class="right">RIGHT</div></td>
then my css would resemble:
td{position: relative;}
td .left{position: absolute; text-align: left; left: 0;}
td .right{position: absolute; text-align: right; right: 0;}
... or something along those lines.
You could do it like this, although spans and divs are much better imo.
<table width="100%">
<tr width="100%">
<td width="100%">
<span style="float:left;">left</span>
<span style="float:right;">right</span>
</td>
</tr>
</table>
The floats didn't seem to look right so I used flexbox:
https://jsfiddle.net/6rc8w709/
.td-content{
display:flex;
}
.child{
flex:1;
}
.right{
text-align:right;
}
HTML:
<table>
<tr>
<td>
<div class="td-content">
<div class="child">
LEFT
</div>
<div class="child right">
RIGHT
</div>
</div>
</td>
</tr>
</table>
Flexbox is the right approach since it is now supported by all major browsers. This is an alternative approach if you need to target an older browsers or you don't like the drawbacks of floats. With this approach you can control the overflow of the left and right segment better and you can easily add a centered segment if you need one.
CSS:
table{
width: 100%;
}
.container{
width: 100%;
display: table;
}
.cell{
display: table-cell;
}
.cell .left{
text-align: left;
}
.cell.right{
text-align: right;
}
HTML:
<table>
<tr>
<td>
<div class="container">
<span class="cell left">LEFT</span>
<span class="cell right">RIGHT</span>
</div>
</td>
</tr>
</table>
I want to create a table like this, but using div instead of table
<style type="text/css">
body{ font-family:"Segoe UI", "Tahoma" }
td {
padding:0px 5px 10px 5px;
}
.username {
white-space:nowrap;
vertical-align:top;
text-align:right;
width:auto;
color:DodgerBlue;
}
</style>
<table width="500px" >
<tr>
<td class="username">copperfield</td>
<td>How to create table by using div </td>
<td style="vertical-align:top">time </td>
</tr>
<tr>
<td class="username">copperfield</td>
<td>
How to create table by using div How to create table by sing div How to create table by to create table by using div <img src="images/thinking.gif"> </br>
</td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
<tr>
<td class="username"> </td>
<td>
How to create table by using div</br>
</td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
<tr>
<td class="username"> </td>
<td>
How to create table by using div</br>
</td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
<tr>
<td class="username">michael</td> <td><img src="images/thinking.gif"> Gi ku </td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
</table>
I try the following code but it is not successful
<style type="text/css">
body{
font-family:Segoe UI;
}
.all{
float:left;
display:block;
}
.chat{
width:700px;
float:left;
display:table-cell;
}
.us{
color:blue;
text-align:right;
float:left;
margin-right:10px;
}
.ct{
white-space:normal;
float:left;
margin-right:10px;
}
.t{
float:left;
width:auto
}
</style>
<div class="all">
<div class="chat">
<div class="us"> userna3 46346346me </div>
<div class="ct"> content </div >
<div class="t"> time </div>
</div>
<div class="chat">
<div class="us"> copperfield </div>
<div class="ct"> How to create table by using div How to create table by sing div How to create table by to create table by using div</div>
<div class="t"> 8:00 </div>
</div>
<div class="chat">
<div class="us"> copperfield </div>
<div class="ct"> How to create table by using div Ho </div>
<div class="t"> 8:00 </div>
</div>
</div>
This looks like what you want: http://jsfiddle.net/ttunW/. The key was using display:table; for .all, display:table-row;, for .chat, getting rid of the float:left properties on all the divs, and assigning display:table-cell; to the divs within .chat.
You can't have something floating in a float. It just doesn't work in some ugly browsers cough IE cough.
So change your all class in your css to look like this:
.all div {float:left;}
Then take away all the other floats from your classes. For the us, ct, and t just give them a set width inside of each chat div. Also change the div's inside of the chat div's to p tags.