I have the following rows in a css file
body {text-align: center;}
table {margin: 0 auto}
this causes to all text to be aligned to the middle.
but in somse inner 's I want the text to be aligned right or left
So I added
<table style="text-align:right;">
and the text was still centered.
what shoud I add ?
Your code actually works, it's just hard to tell in your example. Take a look at this fiddle:
http://jsfiddle.net/UzRdL/
Please add style="text-align:right" with td. i think it will be work.
thanks
I guess the table is centered due to the parent div (body). I'll use a div with 100% width and align the text inside it to the right
Or float the div or table to the rigth
If you want only some of the text in the table to be right alignment.
then
<table>
<tr>
<td> Text </td>
<td style='text-align:right'> This text is align to right </td>
<td style='text-align:left'> This text is align to the left </td>
</tr>
</table>
Related
I have a table with multiple columns. In one of the column rows I want to add 2 elements which will be next to each other. One text element and one icon. The icon has a fixed with, the text element needs to be dynamic and has to be truncated with ... when the column cannot stretch anymore.
This is the HTML:
<table>
<tr>
<td>
</td>
<td>
<span>Truncated text goes here</span>
<i class="icn sprite icn-name></i>
</td>
<td>
</td>
</tr>
</table>
How do I do this? Using display: table; will make the HTML all buggy.
As said in comments, if you allow text and image to stay in adiacent cells, you can try the following.
<table>
<tr>
<td>Truncated text goes here</td>
<td><img src="imageURL" /></td>
</tr>
</table>
You can use vertical-align:top; in td style to align text on the top of the cell. And then you can use the following to set image width.
td>img {
vertical-align:top;
display:inline-block;
width:80px;
}
Fiddle
UPDATE
If you don't want to add extra cells to your table, you can create an internal div inside the cell, display it with display:table; property, and then display both span and img with display:table-cell; property.
Fiddle
I added the <i> element in front of the <span> element and gave the <i> element a float: right; and the <span> element the truncate styles.
Works fine now!
I am looking for some html help. How would I go about moving a text block centrally within a cell but also keeping their alignment left intact. I do not wish the text to be displayed all centered as I am going to be using an unordered list. I simply want the block of text to be moved in to the center of the cell.
Example of current scenario:
http://jsfiddle.net/AygnN/
<table id="sub-content" style="width: 100%;">
<tbody>
<tr>
<th>Departments</th>
<th>KPI Types</th>
<th>Bonus</th>
</tr>
<tr>
<td>
<ul>
<li>dfgsdgfdfg</li>
</ul>
</td>
<td>
<ul>
<li>sdfgsdfgsdfg</li>
</ul>
</td>
<td>
<ul>
<li>sdgsdfgsdffgsdgf</li>
</ul>
</td>
</tr>
</tbody>
</table>
If you have the <h1> tags as column headers, you should use actual table headers (<th> tags). Now, in the CSS you can say:
th { text-align:center; }
EDIT:
#sub-content td{ padding:0px 60px; }
and all table headers will be centered while all lists in the table will be aligned to the left.
This method is much more standard.
JSFiddle
You can put the text in a div and host the div inside the table cell. The text will follow the css style specified in div where as the div itself will be in center of the cell.
The example you have given does same kind of things. It rather divides the cell in multiple cells and put the text in the middle one.
I have a table structure like below:
<table>
<tr>
<td>
<div id="FirstDiv">
<table>
<tr>
<td>
</td>
</tr>
</table>
</div>
</td>
<td>
<div id="SecondDiv">
</div>
</td>
</tr>
</table>
The structure of FirstDiv and SecondDiv are same. The td tag inside FirstDiv contains some text and I am showing the text (Text is dynamic one,it is coming from back end.) using anchor tag but if the text is more wider than 150px, it is pushing the border to right. According to requirement, there should not be any horizontal scroll bar so, I tried to wrap the text inside the anchor tag, giving styles like word-wrap:normal, but till now not able to fix it. Its either giving me a horizontal scroll bar or pushing the border to right.
Thanks in advance.
Try this:
table {table-layout:fixed}
td {width:50%}
I am trying to place a hyperlink vertically so it's to the middle of the height of a textbox but it's not working for me.
Here's the jsfiddle example. I want to do this without using Javascript, works in IE6+, the two elements need to be in the same td column, without using hard coded pixels, and the hyperlink to be right next to the right edge of the textbox (like it's shown in the example, just move it upward to the middle of the yellow box).
As long are the textarea and a elements are inline elements, they will share their base line. If you float the elements, you can set the line height of the a element to match the height of the textarea:
textarea { float :left; }
a { float: left; line-height: 6em; }
Demo: http://jsfiddle.net/Guffa/aLtXA/6/
Well, if you are willing to nest tables, this will work:
<table>
<tr style="vertical-align:top">
<td>
<table>
<tr style="width: 500px;">
<td>
<textarea cols="45" rows="5"></textarea>
</td>
<td style="background-color:yellow; vertical-align:middle">
Edit
</td>
</tr>
</table>
</td>
<td>
second cell
</td>
</tr>
</table>
but I hate this level of nested hell. It leads to madness and grey hair.
I hope someone will post a nicer answer.
Is it possible perhaps with the twitter bootstrap?
Here you go: http://jsfiddle.net/aLtXA/16/
I put vertical-align:middle on the TEXTBOX and anchor. As well, I removed the vertical-align from the table cell.
I have a table column like this, where I want to align an image and a text.
The text must be in the middle of the image.
<td><img height='50px' src='blabla'>Hello</td>
The above aligns the text at the bottom of the image.
I have also tried adding vertical-align:middle to the td style property, without luck.
I have also tried adding a <font> and styling that to vertical-align:middle without luck.
I know of one way, and that is adding another table column and having the text and image in separate columns, then it would be possible to align the text vertically in the middle, but I am trying to avoid this.
Any ideas?
You have to add the vertical-align to the img, not the td:
<td>
<img style="vertical-align: middle;" src="test.jpg"/>
test
</td>
To apply the style to all images in tds, use an external CSS:
td img {
vertical-align: middle;
}
Have you tried using valign="middle"
<td valign="middle"><img height='50px' src='blabla'>Hello</td>
Also, no need to add "px" to the height of the img.
Here you go:
<table>
<tr>
<td><img height='50' width='50' src='http://www.google.com/images/logos/ps_logo2.png' style='vertical-align:middle;">Hello</td>
</tr>
</table>
http://jsfiddle.net/FDRy8/
use vertical-align:middle on the image and not the td
td img{
vertical-align:middle;
}
working example at http://www.jsfiddle.net/gaby/pPVtH/
Add vertical-align to the row as well, not just the cell.