I'm having what seems to be a basic CSS issue.
I have a table within a table, and the imbedded table is there to contain a sliced image to support a rollover graphic change.
The second row of the imbedded table is getting a space between the first row and itself.
Here is the HTML Markup:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th class="appResourceHead text14px textBold">Parametric Search</th>
</tr>
<tr>
<td class="appResourceBodyNoPad text12px">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_01.png" width="163" height="132" style="border-style: none;" />
</a>
</td>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_02.png" width="67" height="132" style="border-style: none;" />
</a>
</td>
</tr>
<tr>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_03.png" width="163" height="48" style="border-style: none;" />
</a>
</td>
<td><a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="/centralSemi/images/Parametric_Search_04.png" rel="/centralSemi/images/Parametric_Search_Down_04.png" class="rollover" width="67" height="48" style="border-style: none;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
I have the following jsfiddle to show you my markup in action.
http://jsfiddle.net/5bZtz/
When looking at the table in Firefox and Chrome I don’t have the space, but in IE the space is shown like you can see in the jsfiddle example.
Simple add below code in your css,
td {
line-height:0;
}
I update your fiddle here. Kindly see it works ! http://jsfiddle.net/5bZtz/1/
Good Luck ..)
Add to <img ... /> css properties: display:block; and height:132px;
Related
This shows my image in a small circle:
<div class="row">
<div class="col s1">
<img src="images/img1.jpg" alt="" class="circle responsive-img">
</div>
</div>
Now, I want to add the same image, in a table cell (td) and show it in a circle of the same size.
Should I copy/paste the above code as is inside the td ? It seems too verbose. Is there a simpler way?
Note: I know that a solution could be to write some custom css, but the reason why I use a css framework is to not write css, especially for common things like this.
You can just add the classes directly to the table elements like:
<tr class="row">
<td class="col s2">
<img src="src" alt="" class="circle responsive-img" />
</td>
</tr>
Here is an example:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<table>
<thead>
<tr>
<th>Name</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col s1">
<img src="https://i.stack.imgur.com/4iGwt.jpg?s=328&g=1" alt="" class="circle responsive-img" />
</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
There is no need to mix the grid system with the table. This will suffice:
<img height="30" width="30" class="circle" src="https://picsum.photos/50" alt="My Circular Image">
The .circle class in materialize just adds this CSS:
.circle {
border-radius: 50%;
}
The responsive-img class add this CSS:
img.responsive-img {
max-width: 100%;
height: auto;
}
This is to stop images breaking out of containers, and is of no help to you here. What you need to do is use a square image and control the height of the image inline, as shown above.
Codepen.
You can use a button circle and set image with tag responsive-img, example:
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div>
<table>
<thead>
<tr>
<th>Image</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="btn-floating waves-effect waves-light btn-tiny white">
<img src="https://materializecss.com/images/yuna.jpg" alt="" class="circle responsive-img">
</a>
</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
<tr>
<td>
<a class="btn-floating waves-effect waves-light btn-tiny white">
<img src="https://materializecss.com/images/yuna.jpg" alt="" class="circle responsive-img">
</a>
</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
</div>
I'm trying to make a centralize button in HTML e-mail. The tricky part here is my wish the button to be as wide as its content. The following code works perfect except in Outlook.
Here is the HTML:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td style="width:1%;white-space:nowrap">
<a href="#" style="text-decoration:none">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="margin-top:16px;padding:8px 16px 8px 16px;background-color:#5091cd;border-radius:2px">
<a href="#" style="font-size:15px;letter-spacing:.04em;color:#ffffff;text-transform:uppercase;text-decoration:none;display:block;text-align:center;max-width:600px;overflow:hidden;text-overflow:ellipsis">
Go to platform
</a>
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td></td>
</tr>
</tbody>
</table>
The expected result is:
The actual visualization:
Increasing the width of the td tag will help you adjust the content in one line.
<style="width:20%;white-space:nowrap">
if you want to take the full width of the container, make td width auto.
currently, td tag width is deciding how the content text will wrap.
I am trying to add a scroll bar on my table but its not showing up on the table. I have tried to put my table in div as well. Here is my code:
<table class="table-condensed table-hover table-bordered" id="EligibiltyAndAccountingReportsTable" cellpadding="0" cellspacing="0" style="width: 45% !important; position: absolute;left: 52px;Top:100px">
<thead>
<tr>
<th>Eligibility Reports</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.duplicateAndOverlappingCoveragesReportPath}}">Duplicate And Overlapping Coverages</a>
<br/>
<p align="left">This report provides a list of SR IDs where<br/> duplicated or overlapping coverage is present.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.openBatchReportPath}}">Open Batches </a>
<br />
<p align="left">This report provides a list of Open Batches<br/> for a given date range by Batch Type.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details<br/> for a given Bid Year and Client Number.</p>
</td>
</tr>
</tbody>
</table>
I have tried to put overflow property in CSS
You need to do two things. First, you have to wrap your table in a container that will do the scrolling, like this:
<div style="height: 200px; overflow: auto;">
<table>
...
</table>
</div>
And you have to remove position: absolute from the style of the table.
Here's an example: http://jsfiddle.net/qbkfbrwd/
Hope that helps!
Edit If instead you only want the body of the table to be able to scroll, it's as simple as adding the following CSS:
tbody {
display: block;
height: 200px; //or whatever you want the height to be
overflow: auto;
}
Example: http://jsfiddle.net/f91pzj6d/
Create a div with:
<div id="myTable">
and in css:
myTable {
overflow:auto;
}
I add a div as container and use overflow: auto. You have also to set a height for your table:
#tableContainer {
overflow: auto;
height: 200px;
position: relative;
width: 300px;
}
<div id="tableContainer">
<table class="table-condensed table-hover table-bordered" id="EligibiltyAndAccountingReportsTable" cellpadding="0" cellspacing="0" style="width: 45% !important; position: absolute;left: 52px;Top:100px">
<thead>
<tr>
<th>Eligibility Reports</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.duplicateAndOverlappingCoveragesReportPath}}">Duplicate And Overlapping Coverages</a>
<br/>
<p align="left">This report provides a list of SR IDs where
<br/>duplicated or overlapping coverage is present.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.openBatchReportPath}}">Open Batches </a>
<br />
<p align="left">This report provides a list of Open Batches
<br/>for a given date range by Batch Type.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
</tbody>
</table>
</div>
I have four table cells, two of which have one image each (the other two cells aren't related to my problem, AFAIK). I am trying to vertically align the smaller image at the top of its table cell. I have tried using vertical-align:top for the image within the table cell, and it isn't working. I am unsure as to why, as I cannot see anything that would cause the issue (using Firebug).
<table class="store-table">
<tr>
<td class="merch-name" colspan="2"><a title="Everybody Needs Love" href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&PP=1" target="_blank">Everybody Needs Love</a></td>
<td class="merch-name" colspan="2"><a title="Jimmy Clanton In Concert" href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX" target="_blank">Jimmy Clanton In Concert</a></td>
</tr>
<tr class="pics">
<td style="width: 25%;"><img class="alignnone size-full wp-image-345" alt="everybody-needs-love" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/everybody-needs-love.jpg" /></td>
<td style="width: 25%;">$15.00</td>
<td style="width: 25%;"><img class="alignnone size-medium wp-image-312" alt="Jimmy Clanton In Concert" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/In-Concert-Cover-178x300.jpg" width="178" height="300" /></td>
<td style="width: 25%;">$20.00</td>
</tr>
</table>
The demo site in question is here. http://www.josephruscitti.com/clients/jimmyclanton/store/ There are three rows of content all together on the table in this page, the row I'm having trouble in is the second row.
You need to apply the vertical align to the td like so:
<table class="store-table">
<tr>
<td class="merch-name" colspan="2"><a title="Everybody Needs Love" href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&PP=1" target="_blank">Everybody Needs Love</a></td>
<td class="merch-name" colspan="2"><a title="Jimmy Clanton In Concert" href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX" target="_blank">Jimmy Clanton In Concert</a></td>
</tr>
<tr class="pics">
<td style="width: 25%; vertical-align:top;"><img class="alignnone size-full wp-image-345" alt="everybody-needs-love" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/everybody-needs-love.jpg" /></td>
<td style="width: 25%;">$15.00</td>
<td style="width: 25%;"><img class="alignnone size-medium wp-image-312" alt="Jimmy Clanton In Concert" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/In-Concert-Cover-178x300.jpg" width="178" height="300" /></td>
<td style="width: 25%;">$20.00</td>
</tr>
</table>
By the way, applying css inline to every table cell is not a great method. You'd be better using separate CSS for some of this. For example:
.store-table td { width: 25%; }
I have an email template I created but I can't seem to figure out what is stretching out the table, I've attached a screenshot for reference. Any help would be wonderful.
Here's the code for that part of the template:
<tr>
<td style="width:27px;height:53px;display:block;float:left;padding:0;margin:0;">
<img src="#" />
</td>
<td style="width:31px;height:53px;display:block;float:left;padding:0;margin:0;"> <img src="#" />
</td>
<td style="width:24px;height:53px;display:block;float:left;padding:0;margin:0;"> <img src="#" />
</td>
<td style="width:25px;height:53px;display:block;float:left;padding:0;margin:0;"> <img src="#" />
</td>
<td style="width:518px;height:53px;display:block;float:left;padding:0;margin:0;">
<img src="#" />
</td>
</tr>
<tr>
<td style="display:block;float:left;padding:0;margin:0;">
<img src="#" />
</td>
</tr>
Instead of float, use the html align="left" in your table cells. You don't need display:block; in the table cells, instead put it in your image tags.
Also, remove all the css width and height in your table cells and replace it with the html width="" and height=""
Also, if you put this in your table tag: border="0" cellpadding="0" cellspacing="0", you don't need the padding and margin in your table cell css.
Basic example of all combined:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="31" height="53" align="left">
<img alt="" src="" width="31" height="53" border="0" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
Note - align left is default, so it is not really needed.