I have table below
<table style="width: 540px " border="1">
<tr>
<td style="text-align: left">
<img id="img1" style="cursor: pointer;" src="../left.png" height="30" width="30" />
</td>
<td style="text-align: center;font-size: medium"><strong>CENTRE THIS </strong>
</td>
<td style="text-align: right"><strong>key </strong>
</td>
<td style="text-align: left">
<input type="text" id="searchbox" />
</td>
</tr>
</table>
Is it possible to align 2nd td with text "CENTRE THIS" in centre of table?
here is fiddle
Yes
You need to use td:nth-child(n) property and table-layout: fixed property
Check this http://jsfiddle.net/Pv3Zk/347/
If you have a fluid layout you can set the width with CSS to percentages like 33%, 33%, and 33%. If you have a fixed layout, you should use CSS to set the widths of each column to fixed widths.
Use CSS to specify width of your td elements (add classes to tell one cell from the other).
Then use table-layout: fixed; for table. This will allow td to have fixed, specified dimensions.
Check out this simple demo.
Try this :
<td align="center">...</td>
If you want the text of Center of the Table, you have to set fix TD width
Related
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.
Any way to middle value in my table cell, both horizontally and vertically.
Here is code:
<table>
<tr style="display: block;height: 44px !important;color:#fff;">
<td style="display:table-cell;vertical-align:middle;"><span class="" ><img src="../images/cal/green-25.png" alt="green-food" width="32px" height="32px"/> <label style="" class="ylw ">Yellow</label></span></td>
<td style="text-align:right;">200 Cal</td>
</tr>
<tr style="display: block;height: 44px !important;color:#fff;">
<td style=""><span class="" ><img src="../images/cal/green-25.png" alt="green-food" width="32px" height="32px"/> <label style="" class="ylw ">Yellow</label></span></td>
<td style="text-align:right;display:table-cell;vertical-align:middle;">200 Cal</td>
</tr>
</table>
Here are the few changes to your markup and added CSS [Removed disaply:table-cell from all td]
img,label{
vertical-align:middle;
}
Fiddle Exmaple
Side Note: Don't use display:table-cell when you're already dealing with the table cells which is td itself. table-cell can be applied for divs according to need.
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 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 have the following script:
<table width="100%">
<tr>
<td style="width: 300px;background-color: red">
</td>
<td style="background-color: lime">
<div style="width: 50%;overflow: auto;">
<img src="very_big_image.jpg" />
</div>
</td>
<td style="width: 400px;background-color: orange">
</td>
</tr>
</table>
It sets the width of second td equal to the width of my img,(but logically the second td must have the width = '100% - 300px - 400px') so I have the scroll in my whole window.
How can I fix it?
Setting the overflow to scroll should acheive what you're looking for:
overflow:scroll;
Example: http://jsfiddle.net/WbAEq/
Setting the overflow to auto as you have will only show scroll bars when you're using clipping.
UPDATE:
In order to get the table to work with overflow content you need to set the table-layout property of the <table> to fixed
table{
table-layout:fixed;
}
You can see an example of this here: http://jsfiddle.net/WbAEq/2/