I need to make the picture to have a width on 100%, which means that the picture should fill out the white space, and align vertical with the text there is below.
My Example Site
The code is for email newsletters, therefore I am using foundation. I cannot find how I am doing that in the documentation, therefore I have to try something else.
How can I make the picture fill out the whitespace?
Relevant HTML code
<body>
<!-- Wrapper for the body of the email -->
<table class="body" data-made-with-foundation>
<tr>
<!-- The class, align, and <center> tag center the container -->
<td class="float-center" align="center" valign="top">
<center>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: blue;">
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tr>
<th>
<center data-parsed="">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" width="100%">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: red;">
<table align="center" class="container" >
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="background-color: yellow;">
<table>
<tr>
<th>Here is all my text is gonna be. Here is all my text is gonna be.Here is all my text is gonna be.Here is all my text is gonna be.</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: pink;">
<table align="center" class="container" >
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="background-color: green;">
<table>
<tr>
<th>Here is all my text is gonna be.</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
Well, you have to modify two things.
First of all:
Original code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
Final code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="padding:0;">
And second: Original code:
<center data-parsed="">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" width="100%">
</center>
Final code:
<center data-parsed="">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" style="width:100%;">
</center>
My best regards!
Sure!, try this:
Original code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="padding:0;">
Final code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="padding:0 !important;">
EDIT ** THIS WILL WORK **
Final version
Change the < img> to < div> with image background:
<th class="small-12 large-12 columns first last" style="padding: 0 !important;">
<table>
<tbody>
<tr>
<th>
<center>
<div style="background:blue url('http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg') no-repeat center; background-size:cover;" alt="image of clever meme that made me chuckle">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" style="display:hidden;">
</div>
</center>
</th>
</tr>
</tbody>
Related
I want to insert a full width row as shown in the below image by Arrow
I have tried colspan, rowspan but did not work for me so removed from question (otherwise question will mess up).
here is what i have tried: https://jsfiddle.net/eabangalore/y3Lt470z/16/
table td {
padding: 5px;
}
<table width="500px" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:3%"></th>
<th style="width:10%">Name</th>
<th style="width:10%">Age</th>
<th style="width:10%">Designation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="width:50px;height:70px;border-radius:50%;">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</div>
</td>
<td align="center">Alpha</td>
<td align="center">21 year</td>
<td align="center">Software</td>
</tr>
<tr>
<td>
<div style="width:50px;height:70px;border-radius:50%;">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</div>
</td>
<td align="center">Alpha</td>
<td align="center">21 year</td>
<td align="center">Software</td>
</tr>
</tbody>
</table>
Qusetion: i want to add a full-width row as shown by arrow in red color area (above image)
Note: i cannot change table into divs as i'm working on maintenance project.
You looking for this table structure. You have to use once rowspan and once colspan.
<table width="500px" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:3%"></th>
<th style="width:10%">Name</th>
<th style="width:10%">Age</th>
<th style="width:10%">Designation</th>
</tr>
</thead>
<tr>
<th class="" rowspan="2">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</th>
<th class="">1</th>
<th class="">2</th>
<th class="">3</th>
</tr>
<tr>
<td class="" colspan="4">new row</td>
</tr>
<tr>
<th class="" rowspan="2">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</th>
<th class="">a</th>
<th class="">b</th>
<th class="">c</th>
</tr>
<tr>
<td class="" colspan="4">new row</td>
</tr>
</table>
Small Note: use instead inline style classes.
I am using the CSS framework Foundation for Email to create a responsive email template. My email design has tiles stacked next to each other, but I can't create the gap between each other using raw Foundation.
My hacky solution involves using css property border to create the visual gaps between the tiles. I am wondering if there is a better solution that what I have tried.
My code at CodePen has two tables. The first table is the table I would like to fix without using any hacky solutions. My second fix involves applying the border css property to visually create the desired gap.
I am looking for a solution that where I don't need to do any hacky solutions like what I've done for the second table.
Desired look: https://imgur.com/a/CiyUUs3
Code: https://codepen.io/anon/pen/qYzGEN
border is not a bad way to go. It's widely supported by email clients and it since you're using it as a style sheet, it can be adjusted depending on the size of the email width through #media queries. The only better way might be <table cellspacing="10"> to force a space between the tables.
The drawback to what you are doinf is that Outlook only has partial support background-color The same with Android. So in some email clients you're not going to have have a white background. My suggestion is to incorporate a 1px border around each table cell style="border: 1px solid #333333;" for differentiation.
<table class="row" cellspacing="10" border="1">
<tr>
<td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 3</td>
<td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 4</td>
<td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 5</td>
</tr>
</table>
I hope that gives you some ideas.
Good luck.
If you don't want to use border then strap yourself in for a very busy looking document. One of the reasons I don't like bootstrap-like frameworks, your at the mercy of a hundred different inline classes.
Foundation 2.2 describes columns for tables as such:
At the top level, a column is a <th> with the class .columns.
Inside of the <th> is another full table. The content of your column goes inside of a <th>. Right below that table header should be another <th> with a class of .expander. This empty element helps the column expand to be full-width on small screens.
Essentially saying, your going to be doing a lot of nesting. The structure will resemble something like this according to Foundation 2.2:
<th class="columns">
<table>
<tr>
<th>CONTENT HERE</th>
<th class="expander"></th>
</tr>
</table>
</th>
...repeat...
However, in your particular circumstance, you need to wrap them in a row because Foundation rows handle columns:
A row is a <table> with a <tbody> and <tr>. Inside of this <tr>, you'll place each individual column. The <table> also has the class .row.
So you get the point, more nesting unfortunately. To answer the question specifically using what I think is the structure Foundation has documented, you would need to make 1 row for each level. Meaning Tile 1&2 have their own row, Tile 3&4&5 have their own and so forth. This gives you the flexibility of the rest of their inline styling classes and aligning classes since you'll be doing it the 'Foundation' way, whatever that means.
Now when testing this, I didn't see any adverse complications while omitting the .expander class, but since they recommend using it, I would just use it per their guidelines.
Here is a revised codepen snippet: https://codepen.io/anon/pen/BxgXJZ
The revision I made is highlighted in red to show boundaries and white to show content for a quick visual aide. Styling and aligning I'll leave up to the scope of your project. This is responsive friendly as your's included classes for it too.
In the case of link-rot, here is the code snippet:
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-6 columns">
<table>
<tr>
<th>TILE 1</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-6 columns">
<table>
<tr>
<th>TILE 2</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 3</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 4</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 5</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-8 columns" >
<table>
<tr>
<th>TILE 6</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 7</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
If you don't want to go with borders, below is an example of how the code will look, basically a lot of tables nested into 1.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="49%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="49%" bgcolor="#000000"> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="32%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="32%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="32%" bgcolor="#000000"> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="66%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="32%" bgcolor="#000000"> </td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
Hope this gives you an idea of how to your result will look (code view).
I need to set a link on a picture. I have to set it up in tables, which I did. But I cannot understand why the picture is linking in full width. That means the background color is also a link. That link should only be on the picture.
If it was a div tag it could be solved with a wrapper, but I do not know how to solve that within tables?
My Example
This is my code:
<body>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
<!-- Row 1 -->
<table class="row collapse" >
<tbody>
<tr>
<th class="small-12 large-12 columns first">
<table>
<tr>
<th>
<img src="http://3.bp.blogspot.com/-Z4vZ7AsD6Bc/T_PNRK_9f2I/AAAAAAAAAH4/t3UZ3BQyqdE/s1600/shutterstock.jpg" alt="test" align="center" class="float-center" >
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<!-- Row 2 -->
<table class="row collapse bgcolor--blue">
<tbody>
<tr>
<th class="small-12 large-12 columns">
<table>
<tr>
<th>
<img src="http://24.media.tumblr.com/7a40daf7853d830815fb83f79752e94a/tumblr_mz2izkaidT1rfn9zxo4_500.png" alt="Fashion news" align="center" class="float-center">
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
I didn't notice this should happen. Try this CSS :
th {
text-align: center;
}
th a {
display: inline-block;
}
edit using #SpencerMay comment
in my html i wanna use "th:unless". i wanna compare two coming variable,if any one match with other, i want to hide the button in that raw.
here is my code..
Art-in-Nisantasi-Id
Art-in-Nisantasi-Text
Art-in-Nisantasi-Url
Art-in-Nisantasi-Coordinate
<h3>All Contents</h3>
<table border="1">
<tr align="left">
<th style="width: 20px;">Art-in-Nisantasi-Id</th>
<th style="width: 100px;">Art-in-Nisantasi-Text</th>
<th style="width: 50px;">Art-in-Nisantasi-Url</th>
<th style="width: 50px;">Art-in-Nisantasi-Coordinate</th>
</tr>
<tr th:each="contentType:${contentTypes}">
<td th:text="${contentType.art_in_nisantasi_id}"></td>
<td th:text="${contentType.art_in_nisantasi_text}"></td>
<td th:text="${contentType.art_in_nisantasi_url}"></td>
<td th:text="${contentType.art_in_nisantasi_coordinate}"></td>
</tr>
<div>
<td
th:unless="${contentType.art_in_nisantasi_id}+'='+${selectedContent.art_in_nisantasi_id}"></td>
<td th:attr="data-id=${contentType.art_in_nisantasi_id}">
<button type="button" class="action-addButton" onclick="show">Ekle</button>
</td>
</div>
</table>
try this way :
<td th:unless="${contentType.art_in_nisantasi_id == selectedContent.art_in_nisantasi_id}"></td>
this td element will be produced or created in dom when both are not equal
even after setting the tr:last-child's border: none, border is still visible. The edit button should be after the last row. But it got position left. http://jsfiddle.net/priyaa2002/mBfk8/ Here is how it should be
You have a floating <tr> and a floating </div>:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
<tr> <!-- WHY? -->
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
</div> <!-- WHY? -->
Get rid of them like so:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
In the future validate your HTML ;)