I'm having a table with a td having two div's. I want both of that div to be in line, but the 2nd div gets wrapped as no of columns increases. I don't want to set the fixed width for each column though.
HTML td structure:
<td class="tableHead">
<div class="tableHeadTxt">Lorem Ipsum</div>
<div class="toggler togglerImgCollapse"> </div>
</td>
div.tableHeadTxt should get a white-space: nowrap; CSS. This will make it not wrap the text, so the second div is forced to.
td.tableHead div.tableHeadTxt, td.tableHead div.toggler should get a float: left; CSS. This ensures it will render inline.
You need a third div following the other two, which has a clear: both; height: 0; width: 100%; CSS attached to it. This ensures that the td retains proper height despite having only inline elements.
Hey now you can do this as like this
Used white-space:nowrap; in your css fine and give to parent div this properties
and child div define display:inline-block; in your css file
Css
.tableHead{
border:solid 1px red;
white-space:nowrap;
}
td.tableHead > div{
border:solid 1px green;
display:inline-block;
}
HTML
<table>
<tr>
<td class="tableHead">
<div class="tableHeadTxt">Lorem Ipsum</div>
<div class="toggler togglerImgCollapse">Lorem Ipsum </div>
</td>
</tr></table>
Live demo http://jsfiddle.net/2965K/
use float in your divs
<table>
<tr>
<td class="tableHead">
<div class="tableHeadTxt" style="float:left">Lorem Ipsum</div>
<div class="toggler togglerImgCollapse" style="float:left">pbaris</div>
</td>
</tr>
</table>
http://jsfiddle.net/gkzdG/
I am using these lines:
<div style="background: transparent url("../Images/20_20.png") no-repeat center; height: 20px; width:80px; ">
<span style=" background: transparent url("../Images/ObjectType/10_10.png") no-repeat center; height: 20px; width:80px; height: 20px; width:20px; margin-left:40px; "> </span>
</div>
Hope it can help you.
Related
I have a table and in one of the columns I have some graphics. What I need is a vertical line 20px from left on top of all what is in the td element.
I tried something like this but the result is not good.
<td>
<div>
<!-- my vertical line -->
<div style="width:20px; height:30px; z-index:1011; border-right: thin solid red;">
</div>
<!-- other content under the vertical line in td -->
<!-- here width can be more than 20px -->
<div style="width:5px; height:10px; z-index:1001; background-color:gray;"> </div>
</div>
</td>
I have also tried with position: relative; for "main div" and absolute for other 2 but not a good result.
With this in place is perfect, I just need to add a vertical line on top of this 20 px from left
<td>
<div>
<div style="width:5px; height:10px; z-index:1011; background-color:gray;"> </div>
</div>
</td>
red line
--------|----------td-----
|
--------|-- some line (one div in may case)
|
--------|---------</td>---
--------|---------<td>----
|
--- | other line
|
------------------</td>---
Fiddle wrong result ("not good")
this is what is expected
There are numerous pitfalls with a table used for creating a chart.
First, the table's cellspacing and the cells vertical padding must be set to zero to make the red line all the way from top to bottom. Second, the height should probably be set to some value, so the inner div of the last cells in a row can be set to 100% height in order to make the red line go from top to bottom within a cell (it also needs to be position absolutely due to possible overlap). Third, to make the horizontal lines appear in the middle of the cells, all cells should have a fixed line-height and the horizontal lines should be displayed as inline-block with vertical-align: middle.
table tr td {
height: 30px;
padding: 0 10px;
line-height: 30px;
}
.horizontal-line{
height:10px;
z-index:1001;
background-color:gray;
line-height: 20px;
display: inline-block;
vertical-align: middle;
border-radius: 5px;
}
.vertical-line{
width:0px;
z-index:10011;
border-right: thin solid red;
position: absolute;
height: 100%;
left: 20px;
}
.width-5{
width:5px;
}
.width-30{
width:30px;
}
td, td > div {
height: 100%;
position: relative;
line-height: 30px;
}
<table cellspacing="0">
<tr>
<td>1</td>
<td>11</td>
<td>
<div>
<div class="vertical-line" ></div>
<div class="horizontal-line width-5"></div>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>22</td>
<td>
<div>
<div class="vertical-line" ></div>
<div class="horizontal-line width-30"></div>
</div>
</td>
</tr>
</table>
Note: I also added and altered some other minor stuff like border-radius to reflect your screenshot a bit. If you want to play around, here is the fiddle.
I just made minor changes to your stylesheets and its working.
.horizontal-line{
height:10px;
z-index:1001;
background-color:gray;
margin-left: 5px;//addes this
}
.vertical-line{
height:30px;
width:20px;
z-index:10011;
border-right: thin solid red;
position: absolute;//and this
}
.width-5{
width:5px;
}
.width-30{
width:30px;
}
Let me know if you are satisfied with this answer. :)
Try this :-
<div style="width:5px; height:10px; z-index:1001; background-color:gray;padding-left: 20px"> </div>
or
<div style="width:5px; height:10px; z-index:1001; background-color:gray;margin-left: 20px"> </div>
Hope this'll help.
I'm struggling to get my 3 tables to be centered in the page.
Here's a picture of what it looks like currently:
Basically (from look at the image), I want the second/middle table ("Work" table) to be the only table in center, and the other 2 tables ("About" and "Collaborate" tables; left and right from the middle, respectively) to have spread out a bit (using margin, I would assume).
Here's my HTML:
.fixedWidth2 {
margin: 0 auto;
width: 1000px;
height: 350px;
background-color: green;
border: 2px solid yellow;
}
.tableProp1 {
width: 200px;
float: left;
margin-left: ;
}
.tableProp1 tr td {
height: 200px;
color: red;
}
.tableProp2 {
margin-left: 40px;
width: 200px;
float: left;
}
.tableProp2 tr td {
height: 200px;
color: pink;
}
.tableProp3 {
margin-left: 40px;
width: 200px;
float: left;
}
.tableProp3 tr td {
height: 200px;
color: blue;
}
<div id="mainContent">
<div class="fixedWidth2">
<table class="tableProp1" border="1">
<tr>
<th>About</th>
</tr>
<tr>
<td>Learn more about me and my accomplishments.</td>
</table>
<table class="tableProp2" border="1">
<tr>
<th>Work</th>
</tr>
<tr>
<td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
</tr>
</table>
<table class="tableProp3" border="1">
<tr>
<th>Collaborate</th>
</tr>
<tr>
<td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
</tr>
</table>
</div>
<!-- Fixed Width 2 DIV for Main Content DIV -->
</div>
<!-- mainContent DIV -->
Since you are using fixed widths for your tables and you're floating them, I would wrap them in a container, set the width on that to match all three tables+margin and set margin: auto on the container
.table-wrapper{
width: 680px;
margin: auto;
}
JSFIDDLE
Alternatively you can just use display: inline-block instead of float:left and add text-align: center to .fixedWidth2
ALT FIDDLE
I would not use <table> at all... table are good for tabular content, not for templating....
I would use DIV or even HTML5's <article> and <section>.
Think also about SEO, <h2> is a better mirror to your website semantic toward search engines than table's TH ...
To center three elements you can simply set them display: inline-block; with some vertical-align, than just setting the <div class="centered"> to text-align: center; will center-align your inner elements. You can also use float:left; but I've not covered that example.
http://jsbin.com/roruqo/1/
<div id="container">
<div id="slider"></div>
<div id="mainContent">
<div class="centered">
<div class="fixedWidth2">
<h2>About</h2>
<p>Learn more about me and my accomplishm...</p>
</div>
<div class="fixedWidth2">
<h2>Work</h2>
<p>I tend to get involved with a lot of d...</p>
</div>
<div class="fixedWidth2">
<h2>Collaborate</h2>
<p>Have a brand new or idea of a project?...</p>
</div>
</div>
</div><!-- mainContent DIV -->
</div>
h2, p{
padding:15px;
margin:0;
}
#container{
width:960px;
margin:0 auto;
background:#eee;
}
#slider{
background:blue;
height:400px;
}
.centered{
text-align:center;
}
.centered > div{
text-align:left;
}
.fixedWidth2{
min-height:170px;
background:#ddd;
display:inline-block;
vertical-align:top;
width: 250px;
margin: 15px;
}
.fixedWidth2 h2{
text-align:center;
background:#aaa;
}
<div id="mainContent">
<div class="fixedWidth2">
<div class="row">
<table class="tableProp1" border="1">
<tr>
<th>About</th>
</tr>
<tr>
<td>Learn more about me and my accomplishments.</td>
</table>
<table class="tableProp2" border="1">
<tr>
<th>Work</th>
</tr>
<tr>
<td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
</tr>
</table>
<table class="tableProp3" border="1">
<tr>
<th>Collaborate</th>
</tr>
<tr>
<td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
</tr>
</table>
</div>
</div>
</div>
add this style in style sheet
.row {
margin: 0 auto;
width: 680px;
}
add "row " division and apply this style then check it's working properly.
I have an example of the problem here:
http://jsfiddle.net/s6t3p/
I have the following markup:
<h1>Just Text</h1>
<table>
<tr>
<td class='cell'>Some Text</td>
<td class='cell'>More Text</td>
</tr>
</table>
<h1>With Icon Cell</h1>
<table>
<tr>
<td class='cell'>Some Text</td>
<td class='cell-ico'><div class='ico'></div></td>
<td class='cell'>More Text</td>
</tr>
</table>
And the following CSS:
table,td,tr
{
margin: 0; padding: 0;
border: none; outline: none;
font-size: 100%; font: inherit;
vertical-align: baseline;
}
table { border-collapse: collapse; border-spacing: 0;}
.cell
{
border:solid 1px #DDD; padding:0 5px; text-align:left;
line-height:27px;
}
.ico {width:24px; height:24px; background:#05F;}
I wish for each cell to be 27px in height. This is the case for the 1st table. But the second table which contains a cell with a 24px div has a height of 32px. I don't understand why. It seems like a 24x24 div should fit inside fine without increasing the cell height.
Can anyone explain why this is happening and how to fix it so that I can keep the cells at a height of 27px? I am currently testing with FireFox 29.
Thanks for any help.
If you are looking to display tabular data, then this is the way to go :)
The behaviour is caused by vertical-align: baseline;.
Just reset the vertical-align for .cell-ico and provide a set height. Give .ico a height of 100%.
Have a fiddle
.cell-ico {
height: 24px;
vertical-align: top;
}
.ico {
width:24px;
height: 100%;
background:#05F;
display: block;
}
try to add this inside your CSS
td{
vertical-align:middle;
height:27px;
}
Looks like vertical-align: baseline; applied to all tags table, tr, td is messing it up.
Remove it and try it out.
I'd suggest you use div elements with their respective display attributes set to either table, table-row, table-cell, etc. Instead of actual tables. The use of tables as a layout techique is discouraged since HTML4. This approach may be a little bulky, but for layout purposes it'll save you some trouble dealing with css.
Check this jsfiddle for example:
HTML:
<div id="Table">
<div class="row">
<div class="cell">Lorem ipsum</div>
<div class="cell">Lorem ipsum</div>
</div>
<div class="row">
<div class="cell">Lorem ipsum</div>
<div class="cell">Lorem ipsum</div>
</div>
</div>
<br/>
<br/>
<div id="Table">
<div class="row">
<div class="cell2"><div class="oddDiv">im inside a div</div></div>
<div class="cell2">Lorem ipsum</div>
</div>
<div class="row">
<div class="cell2">Lorem ipsum</div>
<div class="cell2">Lorem ipsum</div>
</div>
</div>
CSS:
#Table {
display: table;
width: 200px;
border-collapse: collapse;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid blue;
height: 27px;
}
.cell2 {
display: table-cell;
border: 1px solid red;
height: 24px;
}
.oddDiv {
height: 24px;
width: 24px;
overflow: hidden;
}
Update, regarding semantics:
It's true that from a developer's point of view there's no difference between a table markup element and a generic container like a div with the appearance of a table in terms of layout and even code comprehension. But, there's no way for an accessibility tool, say, an screen reader, to discern between a bunch of div elements with different id's, unless the tool was proprietary or there was some kind of convention for special id's to use for this kind of purposes (which I doubt). So for layout purposes divs are the way to go, but if semantics are a concern, the use of tables is the best solution.
I am trying to layout a couple of div's inline and want to give them a fixed width. I currently have:
<style>
.af-header{
border: 1px solid black;
}
.menu-item-header{
border: 1px solid blue;
width: 200px;
}
.menu-item-detail{
border:1px solid orange;
width: 400px;
}
.menu-item{
border: 1px solid red;
}
</style>
<table class='af-header'>
<tr>
<td width=800>
<div class='menu-item'>
<div class='menu-item-header'>my header</div>
<div class='menu-item-detail'>here is my detail</div>
</div>
</td>
</tr>
<tr>
</tr>
</table>
The problem that I'm having is that the menu-item-header and menu-item-detail collapse down to fit the text like in the following screenshot:
How do I fix the width in these two so that the width is respected?
Use display: inline-block not display: inline.
Use display:inline-block for your div elements to put them in line
.af-header div
{
display:inline-block;
}
Js Fiddle Demo
I'm not sure why are you using table here, if it only to take the advantage of column effect then you don't need to use it. You can use just div to achieve the same
<div class="af-header">
<div class='menu-item'>
<div class='menu-item-header'>my header</div>
<div class='menu-item-detail'>here is my detail</div>
</div>
</div>
Js Fiddle without table
The image basically shows what is happening. I have a wrapper of 1270px. Inside that wrapper (indicated by the vert line on the right) I have 4 divs and one table. The table contents is pushing past the page wrapper. THe page wrapper does not have a float as it is only to center the content on the page.
I have tried the following but nothing works:
border: none;
padding: 0px;
border-collapse: collapse;
overflow: hidden;
table-layout: fixed;
What is causing this? This is also allowing all the other content from the other 4 divs to push past the page wrapper as well.
EDIT:
<div id="wrap-page">
<div id="wrap-content">
<table id="content">
<tbody>
<tr>
<td id="featured">
<h1>h1</h1>
<p>Lorem ipsum</p>
<h2>h2</h2>
<p>Lorem ipsum</p>
</td>
<td class="sidebar">
<p>Lorem ipsum</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
html, body{
width:100%;
margin:0;
padding:0;
background:#ccc;
font-size:100%;
line-height:1;
font-family:Arial;
}
#wrap-page{
float:left;
margin:auto;
width:1270px;
}
#wrap-content{
margin:0 5px;
border:1px solid;
}
#content{
position:relative;
float:left;
border-collapse:collapse;
width:1270px;
margin:7px 0;
}
#featured{
width:822px;
}
.sidebar{
width:193px;
vertical-align:top;
}
Your inner divs widths and table is greater than your outer wrapper of 1270px.
It looks like you are just trying to add a border to your text...
Please try this alternative (without tables):
http://jsfiddle.net/UXKTA/9/
.test
{
padding: 5px;
border: 1px solid black;
width: 200px;
}