In the code below, div with red background gets 0 height when the image is there but with image node removed, it gets the correct height of 60px from the parent. Why is it and how can it be corrected?
Here is also the jsfiddle link: https://jsfiddle.net/zuymamq7/
html,body{
width:100%;
height:100%;
}
<table style="width:100%;height:100%;">
<tr style="height:60px;">
<td>
<div style="width:100%; height:100%; background-color:blue;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;"></img>
<div style="display:inline-block;width: 10%; height:100%; background-color:red;">
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Biggest thing that I noticed as I began to edit this:
You added a close image tag (</img>). Those don't exist. The correct syntax is either <img src="something.jpg"> or more technically <img src="something.jpg" /> Threw off some things a lot (especially in the editor)
I'm thinking this is what you want, or at least, I hope.
html,
body {
width: 100%;
height: 100%;
}
<table style="width:100%;height:100%;">
<tr>
<td style="height:60px">
<div style="width:100%; height:100%; background-color:blue;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
<div style="display:inline-block;width: 10%; height:100%; background-color:red;">
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Other Way
If you can change up the HTML a bit, then this should work too.
html,
body {
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
<table style="width:100%;height:100%;">
<tr style="background-color:blue">
<td style="height:60px;width:60px;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
</td>
<td style="background-color:red; width:10%">
Text
</td>
<td> </td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Related
I have done three columns with a mid column with an absolute icon on the side but the problem happens when you show it in the mobile or the screen is different that mine. If you resize screen the icon moves to the left.
The problem is that I used a position absolute for the icon, Is there no other way to do it?
I want to obtain this:
Codepen Code
table{
text-align:center;
margin-top:20px;
}
td{
padding: 20px;
}
#midCol{
background:lightblue;
width:90px;
}
#iconArrow{
color:red;
font-size:100px;
position: absolute;
top:140px;
right:985px;
}
.col1{
background:ghostwhite;
width:400px;
}
.col2{
background:ghostwhite;
width:400px;
}
<div class="container">
<div class="row">
<table border=0>
<tr>
<td class="col1">WORD</td>
<td id="midCol" rowspan="6">
<h2 >C</br>R</br>E</br>A</br>T<span id="iconArrow" class="glyphicon glyphicon-triangle-right"></span></br>I</br>N</br>G</h2>
</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
</table>
</div>
</div>
Instead of setting the left or right attribute on the absolute-positioned element, use auto to centre it, and then left/right margin to nudge it along.
E.g. these settings look about right:
#iconArrow {
right: auto;
margin-left: 6px;
/* other attributes */
}
The problem :
HTML
<div class="visible-sm visible-xs " id="aatablet" style="padding-left: 0px; padding-bottom:10px; padding-top:10px; text-align: center;">
<table border="1">
<tr>
<td colspan="4" class="item_title">
<div style="padding-top:5px;">
Available at:
</div>
</td>
</tr>
<tr>
<td >
<img src="img/amazon-lrg.gif" alt="amazon" />
</td>
<td>
<img src="img/ebay-lrg.gif" alt="ebay" />
</td>
<td >
<img src="img/tomatomill-lrg.gif" alt="tomatomill" />
</td>
<td ><img src="img/BBG-lrg.gif" alt="BBG" />
</td>
</tr>
<tr>
<td >
</td>
<td>
<img src="img/sears-lrg.gif" alt="sears" />
</td>
<td >
<img src="img/healthcraft-home-logo.gif" alt="Healthcraft" title="Healthcraft" />
</td>
<td >
<img src="img/paradisecozycabins.jpg" alt="paradisecozycabins" title="paradisecozycabins" />
</td>
</tr>
</table>
</div>
CSS
#aatablet > table {
margin:0 auto;
}
Framework:bootstrap 3.4.
I want to make td of tomato logo width 100px not 178px like Helt Craft and td of Paradise(last td) 50px not 150px like BIGGAME.
Can someone help me ?I'm not good at making custom tables.Is it possible to do it whit only CSS?
Ty all.
You can give inline:block for td and give separate widths. Target each td using :nth-of-type
td{
display: inline-block;
}
tr:first-child td:nth-of-type(3){
width: 100px;
}
tr:last-child td:nth-of-type(4){
width: 50px;
}
How to make the child divs to display all in one line inside outer div and not fall to second line?
The outer div width should be fixed so the scrollbar should be visible so we can scroll to see all inner divs.
http://jsfiddle.net/pkbkY/
<style type="text/css">
.child
{
width: 100px;
float: left;
}
</style>
<div style="width: 500px; overflow: scroll;">
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
</div>
Here you go: http://jsfiddle.net/thirtydot/pkbkY/1/
#scroll_container {
width: 500px;
overflow: scroll;
white-space: nowrap;
}
.child {
width: 100px;
display: inline-block;
border: 1px solid red;
}
If you need the gaps to be gone, the easiest solution is to remove the whitespace between the child elements: http://jsfiddle.net/thirtydot/pkbkY/2/
I have 3 tables, cascading one after the other. I have a div, that I want to place on right side of these tables. The height of div may vary according to text inside. Currently the div is displayed below tables, like the image below;
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
<div class="mydiv">mydiv</div>
But I want to place the div next to tables, so that it can extend downwards.
Here is the working fiddle http://jsfiddle.net/ZHVuf/1/
You should add a container around you table like this :
Html
<div id="container">
<!-- Your table -->
</div>
And make him float left, like your div #myDiv
Css
#container {
float:left;
}
see updated fiddle.
On this second updated fiddle, I added a wrapper with a clearfix !
insertusernamehere commented that you could use overflow:hidden instead of the clearfix, see here for a new working way to do this with less code.
Apply float:left; to all the table and add clear:both; to second and third table.
now you already has float:left; for div just add position:relative;top:0; and see.
OR
create two divs and add tables in one with left floating and you already have second div.
<div class="tableContainerDiv" style="float:left;">
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
</div>
<div class="yourDiv" style="float:left;"></div>
html
<div class="cl">
<div style="float: left">
your tables
</div>
<div class="mydiv" style="float: left">mydiv</div>
</div>
css
.cl:after{ content: " "; display: block; height: 0px; clear: both; visibility: hidden;}
.cl {display: inline-block;}
/* Hides from IE-mac \\*/
* html .cl {height: 1%;}
.cl {display: block;}
/* End hide from IE-mac */
move tables inside another div , float to left;
HTML
<div class="table-wrap">
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
</div>
<div class="mydiv">mydiv</div>
CSS
.class1{
width: 100px;
height: 100px;
background: orange;
}
.class2{
width: 100px;
height: 100px;
background: green;
}
.class3{
width: 100px;
height: 100px;
background: gray;
}
.mydiv{
width: 200px;
background: blue;
float: left
}
.table-wrap{float:left;}
<table>
<tr><td>
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>enter code here
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
</td>
<td>
<div class="mydiv">mydiv</div>
</td>
</tr>
</table>
I have a Div tag that for some reason is padding the left side with approx 50px.
The following is the html and mind you nono of the "class" have padding-left"
<body>
<div class="popHeaderMain" align="center">
<div class="PopHeader">
Keller Williams Realty | (704) 602-0271
</div>
<div class="popLoginHeader">
<table>
<tr>
<td style="font-size:10px;">Username: <input type="text" name="username" /></td>
<td style="font-size:10px;">Password: <input type="password" name="password" /></td>
<td style="vertical-align:bottom;"><input name="login" type="submit" value="Login" /></td>
</tr>
</table>
</div>
</div>
<!-- ImageReady Slices (backgroundPage.psd) -->
<div style="padding-top:20px; width:900px;" align="center">
<table id="Table_01" width="900" height="1200" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td rowspan="2" style="background-image:url(images/backgroundPage_01.png); background-repeat:no-repeat; width:20px; height:410px;">
<td rowspan="2" style="padding-top:8px; background-image:url(images/backgroundPage_02.png); background-repeat:no-repeat; height:380px; width:455px;">
<div style="padding-left:25px; padding-top:0px; font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#F0F0F0;">
Preview House Address
</div>
<div style="padding-top:20px; width:450px;">
<div style="padding-left:10px;">
<img src="images/GibsonHouse3.jpg" alt="GibsonHouse" border="0" style="width: 437px; height: 300px;"/>
</div>
</div>
</td>
<td style="padding-top:0px; background-image:url(images/backgroundPage_03.png); background-repeat:no-repeat; width:405px; height:58px;">
<div style="padding-top:0px; padding-left:50px; font-family:Georgia, 'Times New Roman', Times, serif; font-size:14px; heigh:58px;">Preview House 1 out of N of houses in area</div>
</td>
<td rowspan="2" style="background-image:url(images/backgroundPage_04.png); background-repeat:no-repeat; width:20px; height:410px;">
</tr>
<tr>
<td style="background-image:url(images/backgroundPage_05.png); background-repeat:no-repeat; width:405px; height:352px;"></td>
</tr>
<tr>
<td style="background-image:url(images/backgroundPage_06.png); background-repeat:no-repeat; width:20px; height:766px;"></td>
<td colspan="2" style="background-image:url(images/backgroundPage_07.png); background-repeat:no-repeat; width:860px; height:766px;"></td>
<td style="background-image:url(images/backgroundPage_08.png); background-repeat:no-repeat; width:20px; height:766px;"></td>
</tr>
<tr>
<td style="background-image:url(images/backgroundPage_09.png); background-repeat:no-repeat; width: 20px; height:24px;"></td>
<td colspan="2" style="background-image:url(images/backgroundPage_10.png); background-repeat:no-repeat; width:860px; height:24px;"></td>
<td style="background-image:url(images/backgroundPage_11.png); background-repeat:no-repeat; width:20px; height:24px;"></td>
</tr>
</table>
</div>
Can anyone help me please
The padding-left phantom was actually being inherited from the body tag. The width was set to 800px instead of 900px.
I don't see any anomalous left-padding. There is an empty cell on the left side of your table, 20px wide. Is that what you mean? Try temporarily changing the border attribute of the table to border="1" to get a better idea where the cells are.
For testing in Firefox, I would strongly recommend getting Firebug if you don't have it already. One of many benefits is that as you mouse over the elements in the HTML tab you'll see their padding highlighted.
Your body tag width is set to 800px. Change it to 900px. :)