I'm working on a mobile site targeting older phones that have limited CSS \ html support and so I'm reverting to tables.
What I'm trying to achieve on a particular page is to have a table row with a heading of a particular value and then another row in the same table with the value and a link to edit
The problem is that the heading spans only one column and I would like to be able to style it so that there is some padding and margins as well as a border.
Can someone provide some advice on how to do this?
HTML
<div class="navalt">
<table style="width:100%;">
<tbody>
<tr class="edHeading">
<td><fmt:message key="editprofile.location"/></fmt:message></td>
</tr>
<tr>
<td class="leftTd">USA</td>
<td class="rightTd">Edit</td>
</tr>
CSS
.navalt {
text-align:center;
padding: 4px 0px 4px 4px;
border-top: thin solid #C5C9D1;
border- bottom: thin solid #C5C9D1;
}
.edHeading {
padding: 4px 0px 4px 4px;
background-color:#E9E1FF;
}
.leftTd {
border-right: thin solid #C5C9D1;
padding: 0px 0px 0px 5px;
text-align:left;
width:50%;
}
.rightTd {
padding: 0px 5px 0px 0px;
text-align:right;
width:50%;
}
As Wabs said, you could just add a colspan to your td in the heading.
Another way, which will allow you to separate your styling more, is to use the thead tag - seeing as you have used <tbody> this would make more sense.
Also - as a side note, you have no closing tags for your div and body and table - though i assume this is because you only copied part of your code..?
Here is a fiddle: http://jsfiddle.net/f6NKt/2/
the code is as:
HTML
<table style="width:100%;">
<thead>
<tr>
<th colspan="2">Heading - location use th tags</th>
</tr>
</thead>
<tbody>
<tr>
<td class="leftTd">USA</td>
<td class="rightTd">Edit</td>
</tr>
</tbody>
</table>
and CSS - notice use of thead instead
.navalt {text-align:center;padding: 4px 0px 4px 4px;border-top: thin solid #C5C9D1;border- bottom: thin solid #C5C9D1;}
thead {padding: 4px 0px 4px 4px;background-color:#E9E1FF;}
thead th {font-size:20px;}
.leftTd {border-right: thin solid #C5C9D1;padding: 0px 0px 0px 5px;text-align:left;width:50%;}
.rightTd {padding: 0px 5px 0px 0px;text-align:right;width:50%;}
Unless I'm missing something, could you not add colspan=2 to the header <td> so it spans your entire table?
<tr class="edHeading"><td colspan="2"><fmt:message key="editprofile.location"/></td></tr>
Related
I want to remove horizontal lines from my HTML table
I have tried using CSS like border-bottom and border-top and set the value to 0 but that didn't change; whereas border-right and border-left working perfectly.
tr {
border-bottom: 0;
/* border-bottom:none; */
}
<table style="border:1px solid black;">
<tr>
<td style="padding:0px 15px 0px 65px;"><strong>Type</strong></td>
<td style="padding:0px 15px 0px 20px; "><strong>Quantitiy</strong></td>
<td style="padding:0px 15px 0px 0px;"><strong>price</strong></td>
<td style="padding:0px 15px 0px 0px;"><strong>total price</strong></td>
</tr>
<tr class="type">
<td style="padding:5px 15px 0px 65px;">{{type}}</td>
<td style="padding:5px 15px 0px 20px;">{{meters}}</td>
<td style="padding:5px 15px 0px 0px;">{{price}}</td>
<td style="padding:5px 15px 0px opx;">{{price_total}}</td>
</tr>
</table>
I want to remove those horizontal lines using CSS like border-bottom but failed.
i have just added psuedo code
this is how actually my table looks like
i want to remove those horiazontal line from cloth,shirt,pants straight away to the bottom for all the columns as well
table, th, td {
border-collapse: collapse;
}
td{
border:1px solid black;
border-top: none;
border-bottom: none;
}
This should do the work
Try to add style to td element. Not to tr.
Moving what was a collection of divs into a table for better column control.
My CSS class associated with the "row" doesn't seem to be carrying the border and webkit properties over when refactored into a table. W3C verified my thought that borders on tables should work (http://www.w3schools.com/css/css_table.asp)
What am I missing to show the CSS border and webkit properties in the table?
JSFiddles:
div: http://jsfiddle.net/phamousphil/rgt03mu4/
table: http://jsfiddle.net/phamousphil/tca7vfyv/
Code:
CSS
.notification-popup-container {
background-color: #fff;
border: 1px solid black;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
width: 400px;
z-index: 99;
display: none;
}
HTML Table
<table class="notification-popup-container-main">
<tbody>
<tr class="notification-popup-container">
<td class="notification-type">
<div>TYPE TYPE</div>
</td>
<td class="notification-popup-body">
<div class="notification-popup-title">TITLE</div>
<div class="notification-popup-message">MESSAGE</div>
</td>
</tr>
</tbody>
</table>
You're putting a border around what is now the tr element, and tr elements can't have borders by default. There's a nice explanation here: https://stackoverflow.com/a/18679047/1876899
You can either add border-collapse: collapse; to the table: Fiddle
Or add the border to the tds instead. Fiddle
.notification-popup-container td {
border: 1px solid black;
}
I have a problem with e-mail clients reverting my styled <hr/> to one with just a solid line.
The following is my mark-up, looks fine in Chrome and IE but Outlook always reverts the dotted line to a solid one.
<hr style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:0; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;" ></hr>
I have looked at Campaign Monitor but nothing particular to guide me there.
All answers appreciated.
I would imagine it's because outlook uses the Microsoft word rendering engine, rather than a HTML engine, and a hr tag would just get reverted to a solid line as in msword.
I'd probably try using a full width table->cell or div and style that instead of using an hr tag.
<table>
<tr>
<td style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:1px; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;"> </td>
</tr>
</table>
nbsp is in there in case the rendering engine doesn't recognise empty cells.
Based on the other answers, I found this to work best:
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="background:none; border-bottom: 1px solid #d7dfe3; height:1px; width:100%; margin:0px 0px 0px 0px;"> </td>
</tr>
</table>
<br>
The width seems to be needed on table in % or preferrably (as per https://www.campaignmonitor.com/resources/will-it-work/guidelines/) set it in px on the td if possible.
The border-bottom shorthand seems to work fine, where the longhand versions as mentioned in kolin's answer don't in Outlook.
EDIT: What I found to have used previously and also works, at least in Outlook (would be nice if anyone who can, could test that in other clients), is a <hr>based approach.
<hr height="1" style="height:1px; border:0 none; color: #D7DFE3; background-color: #D7DFE3; margin-top:1.5em; margin-bottom:1.5em;">
Rather inelegant and only useful for a known fixed width but I'm finding that these are the terrors visited upon you when trying to fix formatting in html emails'.
<p style="line-height:20%; color:#cccccc; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;">........................................................................................................................................</p>
You can use this example:
<div style="border-top: 1px dotted #999999;"> </div>
It will only work against white background unfortunately
Need to declare a font-size, otherwise " " messes with the height.
<tr><td style="background:none; border-bottom: 4px solid #DC1431; height:1px; width:100%; margin:0px 0px 0px 0px; font-size: 1px"> </td></tr>
How can I make my border-bottom not overwrite my border for my table? I what the sides to be complete black and not with a little bit of gray -- or "grey" for you all in England. ;)
UPDATE: Not concerned with the bottom border of the table getting overwritten -- I'm hoping to eliminate on the sides where the border is gray.
Here is my code I'm working with and a jsfiddle.net page for your convience ;)
<table>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
</tr>
</table>
table {
border: 4px solid #000;
width: 400px;
}
table tr {
border-bottom: 4px solid #CCC;
}
Set border-collapse:separate to your table, and add the border to the td's instead of the tr's:
http://jsfiddle.net/ptriek/uJ5zN/2/
At this point, #ptriek's solution seems to be the one that better addresses your question but, just for reference, here's a workaround using a <div> to wrap things up. This solution also keeps the last <tr>'s boarder intact and might come in handy in other situations.
Fiddle: http://jsfiddle.net/uJ5zN/4/
HTML
<div class="wrapper">
<table>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
</tr>
</table>
</div>
CSS
.wrapper
{
border: 4px solid #000;
width: 400px;
}
table {
width: 400px;
}
table tr{
border-bottom: 4px solid #CCC;
}
One way would be to use the CSS last-child selector as follows:
table {
border: 4px solid #000;
width: 400px;
}
table tr {
border-bottom: 4px solid #CCC;
}
table tr:last-child {
border-bottom: 4px solid #000;
}
It seems to me that I horribly missing something here but I can't get the cell
of the following table to span across the whole table with. See following jsfiddle link attached:
http://jsfiddle.net/jeremysolarz/5stQc/2/
I know table design isn't nice but I'm working with a legacy application here with a lot of
gif spacer images and I want to remove this and switch to a more CSS centered layout.
Please help.
Is it necessary to have a nested table in this case? If you just had a single table and used <th colspan="3"> would this solve the issue? Sorry if this is not the case but it seems like you are overcomplicating it!
You are currently declaring the width of the table inline(in the html) and in the CSS and both values are different, you should wrap the tables in a div as follows, and remove the inline width declaration.
/* frames */
#foo{
width:100%;
display: inline-block;
}
.newframeContainer {
padding:0;
margin:0 auto;
text-align: left;
width:70%;
height: auto;
border:none;
-moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
border: 1px solid #B6B6B6;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
The Html should now look like this:
<div id="foo">
<table height="100%" class="newframeContainer" cellspacing="1">
<tbody>
<tr height="27">
<th colspan="3">
ADAM Statistics
</th>
</tr>
<tr height="99%">
<td class="text-bold">Total Project Budgets [USD] </td>
<td>test</td>
<td valign="top" align="right">
192,609,012
</td>
</tr>
<tbody>
</table>
</div>