Demo and my code is like this :
https://jsfiddle.net/oscar11/00z7vdLL/
I want to set this :
<div style="width: 80mm;">
<table>
<tr style="padding-right:35px">
<td>Attachment</td>
<td align="right">Latter Fans 023/PT</td>
</tr>
<tr>
<td>Number</td>
<td align="right">B / 123 / I / 2016</td>
</tr>
<tr>
<td>Date</td>
<td align="right">12 May 2017</td>
</tr>
</table>
</div>
on the far right
I try some step, but it does not work
How can I solve it?
Note :
Don't use flex
You can use css property i.e. float: right. This property sets the element i.e div floats to the right.
e.g
<style>
.**far-right** {
width: 300px;
**float: right;**
}
</style>
Content
depending on how you want it aligned i prefer you using p align function.. and all you commenting here forgot to give him the clear:left in the wrapper css. use a p alignment... its way better
Related
When I am using
.right-align {
text-align: right !important;
transform: translateX(-40%);
}
The Table structure is showing below
<table>
<thead>
<tr>
<th>Bid
</th>
<th>Offer
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="right-align">
200
</div>
</td>
<td>
<div class="right-align">
221
</div>
</td>
</tr>
</tbody>
</table>
The td is overlapping the th element as seen below
How can I can make it go under the header ?
This is happening when table is scrolling
It is very hard to answer the question as it is, however, the table should keep its proportions and structure as long as you keep the code tight:
.right-align {
text-align: right !important;
}
<table>
<thead>
<tr>
<th>Bid</th>
<th>Offer</th>
</tr>
</thead>
<tbody>
<tr>
<td class="right-align">200</td>
<td class="right-align">221</td>
</tr>
</tbody>
</table>
It is nebulous why you decided to use the transform: translateX(-40%); rule in there, but it seems you may be trying to overwrite some rules that come from a theme hence the problem you are facing; If you update your question and add more pieces of code or at least what you are trying to achieve then i could be more helpful :). Also if you are using a framework or theme specify which one.
EDIT.
I saw your updates, you don't need to add a div within the td element to apply a class, you can do it directly in the td element. However, it seems that some css rules are overlapping. Maybe a screenshot of the results in a browser could be helpful.
I have several div elements where inside every div there is a table between some paragraphs (p) using the following code:
<p style="display: inline-block;">
Something BEFORE the table
<table style="display: inline-block;">
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
Something AFTER the table
</p>
which produces a nice content that looks something like this:
head
Something BEFORE the table Something AFTER the table
data
However on each div there are different content lengths BEFORE and AFTER the table making it look like this:
head
Something BEFORE the table Something AFTER the table
data
head
Short BEFORE the table Short AFTER the table
data
head
Something long BEFORE the table Something long AFTER the table
data
What I want is set some "margin" to every table so they are a set distance from the beginning of their parent element (p on this case) so it will hopefully look like this:
head
Something BEFORE the table Something AFTER the table
data
head
Short BEFORE the table Short AFTER the table
data
head
Something long BEFORE the table Something long AFTER the table
data
The BEFORE, table, and AFTER elements of the page must be handled like this as having each of these on their own div and displaying them side by side will mess with this page section styling and also will produce a similar problem but now oriented vertically (however if your solution requires to do this please do share... maybe I'll end up using it).
P.D: If your solution includes Bootstrap please use version 3.
P.D.2: I'm sorry about how messy the examples look I'm still getting used to this.
Wrap it in a table structure. This can be done with div's styled as tables. This way you can make it responsive.
! Do not ever again put other block level elements in a p element
See: Why is <table> not allowed inside <p>
Below is the HTML of what you need:
.table{
display: table;
widht: 100%;
}
.row {
display: table-row;
}
.cell{
display: table-cell;
padding: 0 7.5px;
}
<div class='table'>
<div class='row'>
<div class='cell'>
Something BEFORE the table
</div>
<div class='cell'>
<table>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
</div>
<div class='cell'>
Something AFTER the table
</div>
</div>
<div class='row'>
<div class='cell'>
Something LONGGGGGG BEFORE the table
</div>
<div class='cell'>
<table>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
</div>
<div class='cell'>
Something AFTER the table
</div>
</div>
</div>
Here is a simple and easy solution:
.before-table {
min-width: 250px;
display: inline-block;
}
<p style="display: inline-block;">
<div class="before-table">Something BEFORE the table</div>
<table style="display: inline-block;">
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
<span>Something AFTER the table</span>
</p>
To set an absolute position you can use position: absolute on the element you're trying to position. It will get positioned at coordinates (0,0) (top-left) of it's first non-static parent. (By default every element has a position set to static, until you explicitly set it to something else). So that means you also need to assign a position to the parent (p I'm your case) so that it overwrites the default. Something like position: relative on the parent should do the job.
After that you can use the "top, right, bottom, left" CSS properties respectively to set a custom position from the parent's top/right/bottom/left border.
p {
position: relative;
}
table {
position: absolute;
left: 150px; // or whatever distance works best
}
Something like this, or it's equivalent inline version should do.
I want to put a background image in only 1 cell of the table. When I'm specifying in table tag or in 'style' background is being applied to whole screen. Is it possible to specify different local images to different cells in a table using only html?
Relevant HTML (from comment by the OP):
<table align="center" height=501 border=2>
<tr>
<td height=167 align="center" style="background: (C:\Users\user\Desktop\4R9EF00Z.jpg);">[here]
Apple pie s</td>
<td rowspan=3 width="80%"> <b>Ingredients</b> .........</td>
</tr>
</table>
<table style="width: 100%; height: 300px; ">
<tr>
<td style="background-image:url(http://www.housecatscentral.com/kittens.jpg)">CELL ONE</td>
<td>CELL TWO</td>
</tr>
</table>
Ways to apply the style:
Inline style (usually not the preferred method)
Class selector
CSS2/3 hierarchy selector or pseudo-class
ID selector
Simply use inline CSS on the <td> element of the cell.
For example:
<td style="background: url(/resources/images/background.png);">
Specify your background (using style attribute) for <td> tag (or <th> tag)
You have to specify it to the cell (td tag), not to whole of table.
do it like this:
<tr><td style="background-image:url('yourPath')"></td></tr>
HTML:
<table>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr>
<td class="cell">Cell 1</td>
<td id="cell">Cell 2</td>
<td style="background-color: yellow">Cell 3</td>
<tr>
</table>
CSS:
.cell {
background: url(http://forum.php.pl/uploads/profile/photo-50953_thumb.png);
}
#cell {
background: url(http://forum.php.pl/uploads/profile/photo-50953_thumb.png);
}
Preview here: http://jsfiddle.net/384An/
With CSS there are two ways, assign an id to the cell:
#tableCellID {
background-image: url(path/to/image.png);
}
Or use nth-child:
tbody tr:nth-child(2) td:nth-child(3) {
background-image: url(path/to/image.png);
}
Combining both approaches in one JS Fiddle demo.
If you must use in-line styles (and I heartily recommend avoiding this if you can):
<td style="background-image: url(path/to/image.png);">...</td>
Or, possibly (but it's deprecated):
<td background="path/to/image.png">...</td>
But, please note that I do not recommend, or support, using either of these approaches. Certainly the final approach is horrible, but if it's the only approach you can take then...just don't tell me you used it. It's horrible, and it'll keep me awake for days feeling guilty.
Updated the previous JS Fiddle demo.
I have normal table, nothing special about it, here it is:
live example : http://jsfiddle.net/fFENK/1/
<table width="100%" border="1">
<tr>
<td rowspan="2">January</td>
<td colspan="2">$10s0</td>
</tr>
<tr>
<td>$100 <br/>$100 <br/>$100 <br/> </td>
<td>$540</td>
</tr>
</table>
The problem here is the text that got automatically centered along, as you can see in the live example I gave before, the text "January" is in the middle of the cell and not at the top of the cell like it suppose to be. How do i fix it?
Set the vertical-align property of the cell.
Add some css to your code:
td {
vertical-align:top;
}
Add valign attribute to <td> node:
<td rowspan="2" valign="top">January</td>
You should apply this css to make it get to the top
td { vertical-align: top }
I need to create a chat layout that uses all the available space and scales nicely, but has few fixed sizes.
Here's the structure:
<table style="width: 100%; height: 100%">
<tr>
<td></td>
<td style="width: 200px; background: red;"></td>
</tr>
<tr>
<td style="height: 100px; background: blue"></td>
<td></td>
</tr>
</table>
However, I want to place a lot of content in the first table cell and I want it to scroll, so it won't expand the table.
Is it possible to make it overflow properly, without having a fixed height for the cell? Simply adding overflow: auto doesn't seem to work.
PS. I hate tables, but can't figure out a very clean and cross-browser way to do a layout like this with divs and css. If someone can come up with one, I'll gladly use it.
One way to achieve is use put all content in div element and set div overflow property to auto
<table style="width: 100%; height: 100%">
<tr>
<td>
<div style="overflow:auto;">
//your contain
</div>
</td>
<td style="width: 200px; background: red;"></td>
</tr>
<tr>
<td style="height: 100px; background: blue"></td>
<td></td>
</tr>
</table>
An alternative if your content shouldn't actually even be in a table is to use a CSS grid system, such as 960.gs or Nicole Sullivan's "OO-CSS".
You'd want to divide a container into however many grids you needed and these lend themselves much better to CSS decoration. They're much more flexible and simple to use.