I am creating an email flyer but Outlook is making my two columns wider than they should be.
My flyer consists of one table divided into two columns and then two nested tables, one in each column.I created them this way so I can edit one nested table without affecting the layout of the other.
Here is an image of the problem that I have when I view it in Outlook, and you can see that the text should be where the red lines are so it runs flush down the flyer:
And this is how I want it to look in Outlook:
Here is my Fiddle.
<table id="father" width="700" border="0">
<tr>
<td height="666" align="left" id="column1" style="border: solid 0 #E0E0E0; border-right-width:1px; margin-bottom:10px">
...
</table>
Not sure what's causing the problem, as I've checked widths. I know Outlook can be funny with <table>'s
Fixed the problem. I added:
table.father {
table-layout:fixed;
}
table.father td {
overflow: hidden;
}
This stops the tables from forcing outwards.
Related
So I have a table with a navigation bar to scroll through the records. I changed the table-layout property to fixed so the columns wouldn't move when scrolling through the navigation. To do so, I had to apply the following CSS code:
table.fixed {
table-layout:fixed;
}
table.fixed td {
overflow: hidden;
}
The problem is that one of the columns of the table (the third one in this case) isn't able to fit the whole text in one line breaking it in two lines. How can I change the width of the column in order to accommodate longer text into one line?
Try
<td nowrap>
</td>
If you are using HTML 5 then
<td style="white-space:nowrap">
</td>
I know there are a lot of questions about that, but none of their solutions worked for me.
I have an html page formed by only a table (that I want print), I want the table to perfectly fit inside an horizontal a4 sheet.
This is my table without text (is a match referee):
(source: i.ibb.co)
The problem is that when I add some text the height changes.
I tried adding div inside td with an height, but this doesn't work well...
Also I would like to know how to print the page horizontally, cause my table overflow the printing area...
This is an example of my table:
<table>
<tr>
<td>
<div>BLABLABLA</div>
</td>
</tr>
...
...
...
</table>
I would suggest to use table-layout: fixed to manage size of your table and cells. Then as shown in example below manage overflows.
Which gives you stretched table, which wont adapt height to content.
.myTable {
table-layout: fixed;
width: 100%;
height: 100%;
}
.myTable tr td div{
overflow: hidden;
border: 1px solid #333;
height: 20px;
}
.myTable tr.higher td div {
height: 40px;
}
<table class="myTable">
<tr>
<td><div>A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.</div></td>
<td><div>A lot of text to display. A lot of text to display. A lot of text to display.</div></td>
</tr>
<tr class="higher">
<td><div>A lot of text to display. A lot of text to display. A lot of text to display.</div></td>
<td><div>A lot of text to display. A lot of text to display.</div></td>
</tr>
</table>
You can insert it into #media print and adjust properly to your table.
References:
Media Queries
Position Fixed
I've got a pretty regular HTML <table> with one cell that spans multiple rows via rowspan. Inside of this cell I've got a <div> that I want to occupy the entire height of the cell but for the life of me I can't seem to figure it out. It seems similar to this post which mentions this Chrome bug but also seems so simple that maybe I'm just not thinking clearly.
Here's a stripped down version of my HTML:
<table>
<tr>
<td class="a" rowspan="2"><div>A</div></td>
<td class="b"><div>B</div></td>
</tr>
<tr>
<td class="c"><div>C</div></td>
</tr>
</table>
And CSS:
td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;
}
And a JSFiddle. And here's what I'm getting and what I'm trying to get:
What's really weird is if I use Chrome's inspector to change the <div> to display: inline-block and then set it back to display: block it actually looks pretty much exactly how I want it to.
(And no, switching away from a table isn't an option for this project, there's other code not shown that requires that.)
Option 1
Simply add overflow:auto; to your div CSS
Demo Fiddle
td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;overflow:auto;
}
Option 2
Alternatively you'll need to define the height of your table in order for the child to be able to calculate what its 100% is 100% of.
Option 3
The only other way would be to set position:relative on the td elements then position:absolute for the child div
I have a web app that uses bootstrap to make it mobile friendly.
In an attempt to visually group 3 items together, I have created a class the puts a box / border around the table cell where these three items appear. (the three items are link4, 5 and 5)
Here's the class:
td.lights
{
border: 2px solid black;
}
And here's the problematic HTML - I've paired it down to the minimum code, just for demo purposes.
What I'm noticing is that when I simulate a mobile device (using Firefox's Responsive design view tool) the bottom of the
<table>
<tbody>
<tr>
<td>link1</td>
<td>link2</td>
<td>link3</td>
<td> </td>
<td class="lights">link4 / link5 / link6</td>
</p>
</tbody>
</table>
Immediately after this table, I have this code to create another table:
<P>
<table class="table table-bordered table-striped">
<thead>
etc...
</thead>
</table>
When i resize my browser, the border on the bottom of my in table 1 gets cut off, depending on how small by browser size gets. The other fields look fine, but then again, they don't have a border around them. To me, it looks like there's a fixed set of space above and below my text ("link4 / link5 / link6") that is not dynamically changing.
I've tried adding a height "dynamic" height property to my td like so:
td.lights
{
border: 2px solid black;
height: 1em;
}
But that didn't resolve my problem.
Any suggestions? Please and thanks!
As far as I can tell you have quite a few errors in your markup:
</p>
Should be:
</tr>
Also, should you have a:
<P>
Before your second table? I would avoid wrapping your tables with P tags as this will add unwanted padding and doesn't make sense from a semantic perspective.
Fix those first and see what happens. Secondly I would recommend - when dealing with tables - to use the following:
<table cellpadding="0" cellspacing="0" border="0">
You can also do this in CSS with the following:
table, tr, td { margin: 0; padding: 0; border: 0; }
This should make sure you have no unwanted padding in and around your cells.
I currently have a little HTML page with following HTML/CSS codes inside.
<table style="width: 300px;">
<tr style="height: 120px;">
<td width="width: 100px;">
<img src="images/lol/avatars/3.png" style="vertical-align: middle; width: 100px; height: 100px;">
<img src="images/score/3.png" style="display: block; background: #0c0c0c;" alt="3" title="5 üzerinden 3" />
</td>
<td width="width: 200px;">
aaaa bbb cccc ddddd
<h2 style="font-size: 1.6em; text-shadow: 0 -1px 1px #0c0c0c; text-transform: none; color: #fcfcfc; ">Anil wrote.<h2>
</td>
</tr>
</table>
The current output is:
(Live example is here: http://www.sobafire.com, under the right side of slider.)
The picture pretty much explains what I need, but I'll write them regardless.
The text at top (aaa bbb...) should be centered. Also, it should automatically keep centering itself if the text is long. (It shouldn't go upside or downside, it should be going upside by %50 and downside by %50.)
The "score" image with stars has a background color, which is "#0c0c0c". It should be the background color of entire bottom area, including "Anil wrote." text.
"Anil wrote." text should be aligned to right side.
I'll be glad if you can help me in this case.
Ps. There will be 3x TR in the current table, not a single like this. It won't make a difference but just a side note.
Ps 2. Live example added for users who would like to see it live.
Use two TR for this, first row has the main image and the "aaaa bbb cccc ddddd"
Second row has the stars and the "Anil wrote" info
you will probably need a rowspan=2 for the first column.
Sorry, forget about the rowspan.
Then if you have additional rows, just add them at the end, so you might have 4x TR and not 3.
Move all of your style items to a CSS style sheet
In general div is a better choice for layout, but you will find various points of view on this topic.
Tables should be used for tablular data, not for layout.
Harv
You need to add another <tr> containing two td's one with the rating and one with the 'Anil wrote' bit.
then you can add text-align: center to the comment td
I would suggest you to add another <tr> and <td> and use valign:xxx; and align:xxx;
CSS on divs and spans will work fine