-
Oct 22nd, 2014, 07:20 AM
#1
[RESOLVED] align image in table after text.
Hi. I just need to have a <td>texttttt <image> </td> but i need the image to align in the same horizontal position in every td
so i need that:
Textextextext IMAGE
textt IMAGE
to be like
Texttextet IMAGE
Text IMAGE
I have done alignment with 2 3rd <td> but i prefer to try it this way.
what i have
Code:
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
table td img
{
vertical-align: middle;
display: inline-block;
text-align: center;
}
</style>
</head>
-----etc
<table style="width:50%; border:1px solid" class="tg">
<tr>
<th colspan="2" bgcolor="#AE5454" style="font-weight:bold;">
-TOTAL ALL SITES : 19856
</th>
</tr>
<tr>
<td style="width:50%;">
Myfirsttext
</td>
<td style="width:50%;" >
4264   <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
<img src="image_temp/film_reel.png" alt="" height="12" width="12" />
<img src="image_temp/film_reel.png" alt="" height="12" width="12" />
<img src="image_temp/film_reel.png" alt="" height="12" width="12" />
</td>
</tr>
<tr>
<td style="width:50%;">
Mysecondtext
</td>
<td style="width:50%;" >
27074   <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
<img src="image_temp/film_reel.png" alt="" height="12" width="12" />
<img src="image_temp/film_reel.png" alt="" height="12" width="12" />
<img src="image_temp/film_reel.png" alt="" height="12" width="12" />
<img src="image_temp/film_reel.png" alt="" height="12" width="12" />
</td>
---etc
obviously   will go but i put it as a test here.
Thanks.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Oct 22nd, 2014, 06:36 PM
#2
Re: align image in table after text.
I've put your sample html/css into a pen: http://codepen.io/anon/pen/wcLJI. Feel free to edit and save that pen to update the example.
Maybe flexbox would work for you here?
http://caniuse.com/#search=flexbox
http://html5please.com/#flexbox
-
Oct 23rd, 2014, 02:31 AM
#3
Re: align image in table after text.
I am not sure i can use that since this will be a simple html, imported in a string in VB and send to outlook.
I was hoping for a simple solution but i think making a 3rd td is the only viable. :/
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Oct 23rd, 2014, 02:33 AM
#4
Re: align image in table after text.
Also i want not to show the vertical line between tezt and image:
text image and not text | image .
I hope border =0 will do that?
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Oct 23rd, 2014, 05:55 PM
#5
Re: align image in table after text.
Last time I tried outlook, it's HTML support hadn't progressed much past the HTML of 1999. Not really sure that I can be of any help there. I would guess that border=0 might work on the table element, but inline CSS on the td might be a better option.
https://developer.mozilla.org/en-US/...le#attr-border
-
Oct 24th, 2014, 05:49 PM
#6
Re: align image in table after text.
What about this?
.tg td:nth-child(2){border-right:none}
.tg td:nth-child(3){border-left:none}
Is it viable?
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Oct 26th, 2014, 06:23 PM
#7
Re: align image in table after text.
http://caniuse.com/#search=nth-child
You would have to test it out to see whether your version of outlook supports nth-child. You will have to use inline styles on each td element if it's not supported.
-
Oct 27th, 2014, 07:12 PM
#8
Re: align image in table after text.
Turns out i wouldn't be needing it but i remember to look for outlook issues next time.
microsoft
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|