Please take a look at this fiddle. How can I make the images in th align with each other? Some titles below the images appear to be too long and pushing the images up a bit. I have tried removing padding: 20px; and given it a fixed height but failed. Any suggestions?
HTML
<table id="comparetable" class="blueshine">
<tr>
<td class="blank"></td>
<th><img class="thumbnail" src="image.jpg"><p>jhjhjhik iukiuk iukiu</th>
<th><img class="thumbnail" src="image.jpg"><p>jhjhjhik</th>
<th><img class="thumbnail" src="image.jpg"><p>jhj isdoi idi93</th>
</tr>
<tr>
<td class="rowTitle">Price</td> <td>$4.5</td>
<td>$1.5</td>
<td>$3.5</td>
<td>$1.5</td>
</tr>
.....
</table>
CSS
/* START COMPARISON TABLE STYLES */
#comparetable {width: 100%; table-layout: fixed; text-align: center; margin: 4em 0; border-collapse: collapse; }
#comparetable tr {background: transparent!important;}
#comparetable td,
#comparetable th {padding: 20px; text-align: center;}
#comparetable td.rowTitle {text-align: left;}
.blank {background: none!important; border: none!important;}
.blueshine th {background-color: #b8cee2; font-size: 22px; color: #0c3053; text-align: center; font-weight: 600; text-shadow: 0 1px 0 #e0ecf7; border: 1px solid #9fb6c8; } color: #222;
font-size: 2em;
}
.thumbnail {width:80px;height:60px;}
th { vertical-align:top }
Should do the trick: JSFiddle Demo
best it's to add a second row of th: in first one you put images (with css rule vertical-align: top) and in second one you'll put titles with same css rule.
This would be best solution when you have images with different heights and/or titles with differents heights.
More. if you have no images, titles will stay at same line.
Related
I am working on my website and I have most of the design worked out, shown in the first image. I am trying to make the header row have no space (more accurately, make it look that way by having the image span across the entire row with no spaces.), but still have the elements themselves have space in between them.
Image showing a joined header, but separate body elements:
I am aware of the border-spacing css style, but it has to be applied to the table element, which means it will apply to headers and body elements. This with with a border-spacing set
Image showing what happens to the images when the border-spacing is set on the table:
I did attempt to find an answer before posting and usually I find the answer fairly quickly, but this one seems to be a rare request. I prefer to avoid hacks if possible, but I will use them if its the only way. Also, if possible, I'd like it to be cross-browser capable. (changes to the solution are ok of course, just something that I can make work will all of them.)
I guess code is helpful to show. Here is the html:
<table id="users">
<caption>Point Totals</caption>
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Xogue</td>
<td>64433</td>
</tr>
<tr>
<td>Jesse</td>
<td>104040</td>
</tr>
<tr>
<td>Nanokarp</td>
<td>280</td>
</tr>
<tr>
<td>Brandon</td>
<td>70</td>
</tr>
</tbody>
</body>
and the css:
#users {
border-spacing: 6px;
width: 444px;
float: left;
margin: 20px 90px;
}
#users caption {
background-image: url("_images/points_label.png");
background-size: 200px 35px;
background-position: center center;
background-repeat: no-repeat;
height: 31px;
font-size: 20px;
padding-top: 8px;
}
#users thead {
background-image: url("_images/point_tr_head_back.png");
background-repeat: no-repeat;
}
#users th {
text-align: left;
padding: 9px 30px;
font-size: 20px;
}
#users td {
border: 2px solid #226fdb;
border-radius: 25px;
font-size: 20px;
padding: 18px 5px 2px 25px;
line-height: 15px;
background: #FFFFFFEE;
}
Note: Some of the styles used are likely unnecessary. I've been toying with it for a while and haven't cleaned it up yet.
SOLVED: further down if you would like to see the example. but put simply, wrap the content in a different element (like a span) and move all styles to the new element.
I think you could get there fairly easily with some margins and padding if you can wrap the cell contents in a span (or whatever).
table {
text-align: left;
border-spacing: 0;
}
thead tr {
box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
border-radius: 24px;
}
th {
padding: 6px 1em;
}
th:first-child {
border-radius: 24px 0 0 24px;
}
th:last-child {
border-radius: 0 24px 24px 0;
}
tbody td > span {
display: block;
border: 2px solid blue;
background: aliceblue;
border-radius: 24px;
margin: 6px 6px 0 0;
padding: 0.25em 1em;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</thead>
<tbody>
<tr>
<td><span>Xogue</span></td>
<td><span>262677</span></td>
</tr>
<tr>
<td><span>Jesse</span></td>
<td><span>17632</span></td>
</tr>
<tr>
<td><span>Nanokarp</span></td>
<td><span>12344</span></td>
</tr>
</tbody>
</table>
One option is to add padding to your CSS for td only and keep rest of the attributes same among td and th as below, also if you can share the used code snippet someone can help better:
td {
padding: 5px;
}
I’m trying to get some padding around data in my table row, whose HTML is the following …
<tr class="even subscription-row header">
<td class="ig-header-title ellipsis">
<img src="/assets/s-icon-0d60471f901d65172728d3df0e793b2ee4493a529c1a1dca73409fdae56ad362.png" alt="S icon">
<a class="name ellipsis" target="_blank" href="/scenarios/18">My Scenario</a>
</td>
<td align="center"><img src="/assets/zip_icon-c2a0694959db12a0939d264d4283478c1f59a4b118df839d7020aca929a1df61.png" alt="Zip icon"></td>
</tr>
I applied this style …
.subscription-row {
min-height: 30px;
border-top-width: 0;
border-radius: 0;
border-bottom: 1px solid #C7CDD1;
padding: 12px 6px 12px 10px;
box-sizing: border-box;
}
.subscription-row img, .subscription-row .name {
vertical-align: middle;
}
.subscription-row .name {
color: #3d454c;
font-size: 15px;
font-size: .9375rem;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
font-weight: bold;
}
but there is still not any padding in around the data in my table row. Here is the Fiddle illustrating this — https://jsfiddle.net/77zhfe27/ . How can I get the padding to appear?
You need to apply the padding to the td element.
<style>
td {
padding: 12px 6px 12px 10px;
}
</style>
padding doesn't work on rows.
A often used work-around is to set padding to the cells td, though one get a similar effect using border-spacing on the table.
The down side though, with both, is that you get the space in between the cells as well, so as a work-around, if one really need it on the row, is to either nest a table in a table, or as in below sample, use the row's border to create a padding effect
Note, that the table need border-collpase: collapse for styles to apply on a tr
table {
border-collapse: collapse;
}
table tbody tr:hover {
background-color: cyan
}
.subscription-row {
min-height: 30px;
border-color: transparent;
border-style: solid;
border-width: 12px 6px 12px 10px
}
.subscription-row td {
border-bottom: 1px solid #C7CDD1;
}
.subscription-row img,
.subscription-row .name {
vertical-align: middle;
}
.subscription-row .name {
color: #3d454c;
font-size: 15px;
font-size: .9375rem;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
font-weight: bold;
}
<table id="subscriptions-table">
<thead>
<tr>
<th>Subscription</th>
<th>Download</th>
</tr>
</thead>
<tbody>
<tr class="even subscription-row header">
<td class="ig-header-title ellipsis">
<img src="/assets/s-icon-0d60471f901d65172728d3df0e793b2ee4493a529c1a1dca73409fdae56ad362.png" alt="S icon">
<a class="name ellipsis" target="_blank" href="/scenarios/18">My Scenario</a>
</td>
<td align="center">
<a href="/scenarios/18/download">
<img src="/assets/zip_icon-c2a0694959db12a0939d264d4283478c1f59a4b118df839d7020aca929a1df61.png" alt="Zip icon">
</a>
</td>
</tr>
</tbody>
</table>
I modified your Fiddle and it appears to work: https://jsfiddle.net/77zhfe27/3/
Key code change is here. Showing emphasis with the large padding (20px).
table#subscriptions-table tr td{
padding:20px;
}
This lets you choose the table with your ID and drill down to what is essentially the row (tr) and cell (td). You could be more global and effect all tables like this:
table tr td{
padding:20px;
}
Then override as needed with individual table classes or ids.
Also: Bob (another post here) gave a better example of setting padding for each side (top right bottom left) with his use of padding:6px 12px 6px 12px; That works too, otherwise setting one value will set that for ALL sides. Doing something like padding:6px 12px; will set top/bottom to 6px and right/left to 12px.
Hope it helps!
Hello all I'm just trying to have my border around my table cell right around the text...not stretched the length of the entire table. Its the section with the border around it
CSS:
table.content_table {
width: 100%;
margin: 0px;
border-collapse: collapse;
}
table.content_table > tbody > tr > td.results {
border: 2px solid;
background-color: #eeeecc;
font-size: 8pt;
font-weight: bold;
PADDING: 0px;
}
HTML:
<table class="content_table">
<br/><br/>
<h1>Planned Vs Actual Productions Drilldown</h1>
<tr>
<td class="results">
Number of results returned: ${fn:length(beans)}
</td>
</tr>
give the text a simple span or any other block element like div p ... span with inline-block is also a block element which can have a border.
table.content_table {
width: 100%;
margin: 0px;
border-collapse: collapse;
}
.border {
border: 2px solid;
background-color: #eeeecc;
font-size: 8pt;
font-weight: bold;
PADDING: 0px;
display: inline-block;
}
Any Element inside a table needs to be in TD so that is is valid html... put another tr > td into your table like this
<table class="content_table">
<tr>
<td>
<h1>Planned Vs Actual Productions Drilldown</h1>
</td>
</tr>
<tr>
<td class="results">
<span class="border">Number of results returned: ${fn:length(beans)}</span>
</td>
</tr>
</table>
The answer lies in the fact that you have table width as 100%. Without any of styling at the TD level, the TD is automatically going to take the most width it can.
The bigger question though, is why you are using a table at all. This is a single column of data, no need for a table here, just use div's.
I had a similar problem with a WordPress theme. The "collapse" wasn't entirely working on the first column, because my theme's style.css "reset" had set the table width to 100%. At least for me, the "auto" width solved the problem.
<style>
table#donations { border-collapse: collapse; width:auto; }
</style>
<table id="donations">
<tr><td>Bitcoin BTC</td><td>1Prh5VnUJRQV3sARhEfQAMKv9UzGqgAMXg</td></tr>
</table>
I'm getting crazy with getting my table look right on different browsers, just when I think I got in one it changes in the other. IE7/8 and Firefox are my target browsers.
Could someone please have a look at the code I just can't figure out what's the problem.
Table is generated by Javascript, I need it have fixed width of 220px, the main problem is tfoot where I have 3 tds for which I'm having problems controlling width.
Here is the relevant portion of the code:
<table class="favouritelinks" cellspacing="0" cellpadding="0" width="220" >
<thead>
<tr><td colspan="3">Your Favourite Links</td></tr>
</thead>
<tbody id="tulemused" ></tbody>
<tr>
<td width="50">Name</td><td><input type="text" id="key" name="key" value="" /></td>
<td rowspan="2"><div class="addimg"></div></td>
</tr>
<tr>
<td width="50">URL</td><td><input type="text" id="val" name="val" value="" /></td>
</tr>
</table>
and css:
.favouritelinks td{
height: 20px;
padding: 3px;
border-bottom: 1px solid white;
word-break: break-all;
}
.favouritelinks td a{
color: white;
text-decoration: none;
}
thead{
background: url(img/title5.png) no-repeat;
color: #444;
font: bold 16px Helvetica;
text-shadow: 0 1px 0 #FFF;
text-align: center;
width: 220px;
height: 36px;
}
thead tr {
height: 36px;
}
.container{
width: 220px;
margin-top: 105px;
margin-left: 10px;
}
.delimg {
background: url(img/details_close.png) no-repeat;
width: 20px;
height: 20px;
float: right;
}
.addimg {
background: url(img/details_open.png) no-repeat;
width: 20px;
height: 20px;
float: right;
}
.urls {
display: none;
}
What am I doing wrong?
Picture http://imageshack.us/photo/my-images/38/56751263.jpg/
Try this in your CSS:
table {
table-layout: fixed;
}
Remove the padding:3px from .favouritelinks td in CSS and all will be OK.
OR BETTER WAY
set td width in CSS not in HTML
I had the same problem with layout good in IE9+, but bad in IE 7/8. I found out "colspan" was the problem when this column is wider then the sum of other matching columns not colspan on other rows. I was specifiying fixed width on all columns except the one I want to be adjusted with the remaining width. But that didn't work on IE 7/8. So I end up splitting rows on different "table" to workaround that layout problem.
I have large URL(without spaces) in one of my Table(html table element) cell which resize table. I do not want to resize table, what property should I set to break URL into new line?
HTML
<table class="ui-grid" cellspacing="0" rules="all" border="1" id="MainContent_gvStatistic" style="border-collapse:collapse;">
<caption>Statistic (Last 50 conversions)</caption>
<tbody><tr>
<th scope="col">Date</th>
<th scope="col">Result</th>
<th scope="col">Api</th>
<th scope="col">IP</th>
<th scope="col">Source</th>
</tr><tr>
<td style="width:200px;">12/16/2011 3:23:59 PM</td>
<td align="center" style="width:50px;">True</td>
<td align="center" style="width:100px;">Web2Pdf</td>
<td align="center" style="width:100px;">::1</td>
<td style="width:200px;">http://a1.quickcatchlabs.com/phototemplates/football_blimp_1.html?i_url=http%3A//lh3.ggpht.com/yf5lVBB_WNBvBHT1HoIzY1SG0-PY5zRCobP3vBacuSk9N346F7CeAIRSFOltR6ZC1-yf-MNKAcAd7bAZ_A%3Ds612-c&i_name=Patriots%20%20vs%20Redskins&i_venue_name=Gillette%20Stadium%20&i_venue_address=Foxborough%20%2C%20MA&d_Score_0=34&d_Score_1=27&d_Period_0=Final&p_name_0=Patriots%20&p_name_1=Redskins</td>
</tr>
</tbody></table>
CSS
.ui-grid { width: 100%; margin: 5px 0 10px 0; border: solid 1px #eeeeee; border-collapse: collapse; }
.ui-grid td { padding: 2px; border: solid 1px #eeeeee; }
.ui-grid td b { font-weight: bold; }
.ui-grid th { padding: 4px 2px; color: #fff; background: #000000; border-left: solid 1px #eeeeee; text-align: center; }
.ui-grid .alt { background: #fcfcfc; }
.ui-grid .pgr { background: #424242; }
.ui-grid .pgr table { margin: 5px 0; }
.ui-grid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }
.ui-grid .pgr a { color: #666; text-decoration: none; }
.ui-grid .pgr a:hover { color: #000; text-decoration: none; }
Add the following to your css
table-layout:fixed
word-wrap:break-word
The following site has a good walk through of this
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
i modified your code a little and this is what works for me hopefully it will help you
<html>
<div id="wrap">
<div id="content-primary">
<table class="table" cellspacing="0" rules="all" border="1" id="MainContent_gvStatistic" style="border-collapse:collapse;">
<caption>
Statistic (Last 50 conversions)
</caption><tbody>
<tr>
<th scope="col">Date</th><th scope="col">Result</th><th scope="col">Api</th><th scope="col">IP</th><th scope="col">Source</th>
</tr>
<tr>
<td style="width:100px">12/16/2011 3:23:59 PM</td><td align="center" style="width:50px;">True</td>
<td style="width:100px">Web2Pdf</td>
<td style="width:100px">::1</td>
<td style="width:100px">http://a1.quickcatchlabs.com/phototemplates/football_blimp_1.htmli_url=ht%3A//lh3.ggpht.com/yf5lVBB_WNBvBHT1HoIzY1SG0-PY5zRCobP3vBacuSk9N346F7CeAIRSFOltR6ZC1-yf-MNKAcAd7bAZ_A%3Ds612-%20%2C%20MA&d_Score_0=34&d_Score_1=27&d_Period_0=Final&p_name_0=Patriots%20&p_name_1=Redskins</td>
</tr>
</tbody></table>
</div>
</div>
</html>
<style type="text/css" media="screen,print,projection">
#import '/css/lab.css';
#wrap {
width:60em;
margin:2em auto;
}
#content-primary {
float:left;
width:60%;
}
#content-secondary {
float:right;
width:36%;
}
table {
width:100%;
border:1px solid #f00;
word-wrap:break-word;
}
th,
td {
vertical-align:top;
text-align:left;
}
</style>
The most practical approach is to add the tag <wbr> after each acceptable break point, such as “/”, “?”, and “&” (maybe also “=”). This tag has been supported by browsers since the early days; it is not included in any HTML specification (though it is proposed to be standardized in HTML5), but it works practically always and has no know drawbacks.
Since this is about a URL in text, the breaks should appear at natural points of division, not arbitrarily. Various style guides (like The Chicago Manual of Style) have their own recommendations, but the simple break point rules mentioned above should be acceptable on all accounts and normally suffice.
There’s some more info on my page on word division in HTML and related matters.
You can try several things:
add the CSS3 property word-wrap: break-word;
You can put a div inside your table cells. Nothing within that div will stretch out the table cell.
max-width css property
Surround the URL in a containing div inside the td. Apply word-wrap:break-word; width:200px to the div container. The div container is for the benefit of IE. In Chrome, for instance, the styles can be applied directly to the td.
word-wrap is non-standard, however, it has excellent browser support, including IE6+.
Here is an example fiddle.