let's say I have something like this:
<table>
<tr>
<td>
<span class="text_1">Text 1</span>
<span class="text_2">Text 2</span>
</td>
</tr>
</table>
How can I tell each span inside my td to take 50% of the width of my td and also center align the text of my span? I also want the texts to appear next to each other on the same line inside my td. I tried something like on the spans:
...
<span class="text_1" style="display:inline-block;width:50%;">Text 1</span>
<span class="text_2" style="display:inline-block;width:50%;">Text 2</span>
...
But that didn't work
Thank you
They will each take 50% of the width of the parent element, the problem is the newline between the elements that also takes up a portion of that space. 50% + a space + 50% equals more than 100%.
Remove the new-line, or use float: left (or right).
With float: left: JS Fiddle demo.
Without the new-line: JS Fiddle demo.
Related
I am trying to put a red rectangle icon followed by some text within a HTML Table cell and I am getting very strange behavior here. I am using just a DIV to draw the red rectangle as shown in the example here. I want the height of rectangle to be the height of the cell so I set the height: 100%
https://jsfiddle.net/pm43k26w/1/
<table border="1">
<td>
<div style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div style="width:10px;height:10px;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
The solution kind of works in Chrome but not in FireFox. FireFox just shows a blank space. It appears it does not like it when I set the height to 100% Can anyone explain why? What's the best way to accomplish this if DIV isn't the right way to go for the rectangle?
Thanks.
Firefox needs content in the div. The following modification will do. The numerical entity is Unicode's 'zero width space character'. A non-breaking space ( ) will do as well, of course.
<div style="width:10px;height:100%;background:red;display:inline-block"></div>
See this fiddle.
Try setting the height of the parent element.
<td style="height:20px">
That should help with the Firefox problem.
Edit: JSFiddle:
https://jsfiddle.net/prove64m/
First of all you forgot the <tr> tag.
So this should be the correct HTML:
<table>
<tr>
<td>
<div></div> first text
</td>
<td>
<div></div> second text
</td>
</tr>
</table>
Then the CSS part:
table {
border:1px solid;
}
td {
height:40px;
}
div {
display:inline-block;
vertical-align:bottom;
width:10px;
height:100%;
background:red
}
Pay attention that the height is ALWAYS evaluated, so, if there isn't any explicitily set, there is nothing "to compute"; we did this here:
td {
height:40px;
}
Other important thing; i guess you would like to control the position of the text after the <div> element; this is possible with online-block elements in this way:
div {
...
vertical-align:bottom;
...
}
Other possible values are: middle, top,...
here the Fiddle: https://jsfiddle.net/pm43k26w/5/
Firstly, you need to understand the problem here. CSS Properties such as height are "Computed". In this particular case, the computed height of the first div (let's call it unseenForce, shall we?) is 0 while its cousin, aptly named seenForce is 10px. See this below :
http://jsfiddle.net/gvo4kf41/
$(document).ready(function() {
$('.Info').html('The computed height of the unseenForce is ' + $('#unseenForce').height() + 'px <br />');
$('.Info').append(document.createTextNode('The computed height of the seenForce is '+ $('#seenForce').height() + 'px'));
});
.Info {
color: red;
margin-top : 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table border="1">
<td>
<div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div id="seenForce" style="width:10px;height:10px;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
<div class="Info">
</div>
This is because none of the ancestors of the unseenForce have a specific height to them. Hence, Firefox is unable to attach a height to it.
What you need to do it force the Computed value of height to be greater that 0. There are many ways to do it and all the answers here show you different ways of doing it. Choose the one which suits your needs.
Here's the way I would do it. Just add height to the row (<td>).
table td {
height: 10px;
}
<table border="1">
<td>
<div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div id="seenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
<div class="Info">
</div>
Hope this helps!!!
I have aligned a span next to div as shown below but there is a spacing between the elements. Can someone tell me what is causing it to appear and how to remove it?
<table>
<tr>
<td>
<div id="headerDiv" style="">DIV</div>
<span id="labelSpan">test</span>
</td>
</tr>
JSFiddle
Using inline-block will create a space when elements are on a new line. (The most frustrating example is when you want li to be side-by-side.
Either do this:
<div id="headerDiv" style="">DIV</div><span id="labelSpan">test</span>
Or this:
<div id="headerDiv" style="">DIV</div><!--
--><span id="labelSpan">test</span>
Alternatively, you can do float:left; instead.
JSFiddle
The inline-block always gives gap. If you don't want that, you can do either:
Remove the Space
<table>
<tr>
<td>
<div id="headerDiv" style="">DIV</div><!--
--><span id="labelSpan">test</span>
</td>
</tr>
</table>
Fiddle: http://jsfiddle.net/praveenscience/w3sjrgc4/2/
Or use float:
<table>
<tr>
<td>
<div id="headerDiv" style="">DIV</div>
<span id="labelSpan">test</span>
</td>
</tr>
</table>
td {
overflow: hidden;
}
td > span {
float: left;
border:2px solid;
}
td > div {
float: left;
border:2px solid;
}
Fiddle: http://jsfiddle.net/praveenscience/vt4kr35w/
This spacing is caused by white spaces (both elements have inline layout), you can get read of them by :
pushing elements next to each other in one line in the HTML markup;
Example:
<td>
<div id="headerDiv">DIV</div><span id="labelSpan">test</span>
</td>
using <!-- --> tags;
Example:
<td>
<div id="headerDiv">DIV</div><!--
--><span id="labelSpan">test</span>
</td>
using word-spacing CSS property.
CSS:
td {word-spacing: -100%;}
It's called white space and occurs between inline (or inline-block) elements when there's space (on the same line or a new line) in the markup.
Here are a few solutions for you:
Solution 1- Remove the white space in the markup:
<div id="headerDiv" style="">DIV</div><span id="labelSpan">test</span>
Demo: http://jsfiddle.net/w3sjrgc4/7/
Solution 2- Set the font-size to 0 on the container then retrieve it on the children.
Demo: http://jsfiddle.net/w3sjrgc4/9/
Solution 3- Comment out the white space in the markup:
<div id="headerDiv" style="">DIV</div><!--
--><span id="labelSpan">test</span>
Demo: http://jsfiddle.net/w3sjrgc4/10/
Solution 4- Left float the children and clear the container to maintain normal document flow on the height.
Demo: http://jsfiddle.net/w3sjrgc4/11/
I have a table with two rows and one column which is surrounded by P tag.
After P I have inserted some " " for applying some space to the table from the start of the line, but these spaces don't get applied to the table and the table was shown from the start of the line.
table {float: left; background: green;}
<p>
<strong>
<span style="font-family:b titr">
<table>
<tr>
<td>
<textarea id='MainSign' name='MainSign' style='background-color:transparent; width: 150px; height: 150px; border: none'></textarea>
</td>
</tr>
<tr>
<td>
<br />شیطون<br />مدیریت کل
</td>
</tr>
</table>
</span>
</strong>
</p>
The <table> tag creates a newline when it is used. So all your spaces are created above the table. The best way to make it possible is use inline CSS code:
<table style="margin-left: 2cm;">
There isn't any need of making the table within a <p> tag.
I guess that you want to move your table away from the left border. You can do this easily with CSS, without adding .
Check this fiddle Fiddle.
I changed the background color to red for easy to understand. Then I gave a id for the table. As id='MainSign' with CSS and then I changed the margin-left:
#mainTable{
margin-left: 100px;
}
You can use any value instead of "100px;".
Table can't be inside a paragraph (paragraph is closed when table begins).
Use float to indent table by spaces in a paragraph. And you can remove span and strong too; they are empty and closed when table begins.
p {float: left; background: red; margin: 0;}
table {float: left; background: green;}
http://jsfiddle.net/5439pj0p/
Note:
HTML, which is rendered by the browser from your code, is:
<p>
<strong>
<span></span>
</strong>
</p>
<table>...</table>
<strong></strong>
<p></p>
Here is a fiddle where you can see that there are really two strong elements (yellow, size of 10x10 pixels).
http://jsfiddle.net/5439pj0p/1/
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 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>