HTML markup:
<table class='cardc'>
<tr>
<td rowspan='5' width='10%'>
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/>
</td>
<td width='70%' colspan='3'>"
."<a href='".$profilePage."&sid=".$sfid."#box-one'>".($record->fields->FirstName)." ".($record->fields->LastName)."</a></font>
</td>
<td>
".$record->fields->Email."
</td>
</tr>
<tr>
<td class='greyF' colspan='3'>
".$record->fields->Country_of_Citizenship__c."
</td>
</tr>
<tr>
<td>
<div class='greyF'>year</div>".$record->fields->Fellowship_year__c."
</td>
<td>
<div class='greyF'>Organization</div>".$record->fields->Partner_Organization__c."
</td>
<td>
<div class='greyF'>Country</div>".$record->fields->Fellowship_Country__c."
</td>
</tr>
<tr>
<td colspan='3'>
<div class='greyF'>Education</div>".$record->fields->Education__c."
</td>
</tr>
<tr>
</tr>
</table>
CSS markup:
.cardc {
border: 5px outset white;
padding: 3px;
width:80%;
}
But as the title says, I'm having cross Browser issues, the border that's supposed to cover the whole table gets cut off at the bottom.
Any recommendations for alternative ways to create the border?
Edited HTML taking everybody's worries into consideration. Border still draws improperly.
See a demo here
It's caused by a combination of an invalid rowspan and border collapsing (which is the default when you select "Normalized CSS" in jsFiddle). If you turn that off or provide the correct number of rows then the border draws correctly.
<td rowspan='5' width=10%> indicates that there are at least 4 following rows, since the current cell shall span 5 rows. Since you don't provide any of those rows the <td> will spill out of the table. Drop the rowspan attribute:
<td style="width:10%">
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/>
</td>
You have a rowspan="5" on the first td which is breaking the bottom border of the table, probably because it cannot find the remaining 4 rows to merge with. Removing the rowspan fixes the border.
http://jsfiddle.net/Q3e9m/
Try fixing the errors with html in your code, for starters. Your code lacks some quotation marks, and styling attributes in tags are deprecated.
<html>
<head>
<style>
.cardc {
border: 5px outset white;
padding: 3px;
width:80%;
}
</style>
</head>
<body>
<table class='cardc' style="height:100px;">
<tr>
<td style="width:10%">
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' style="height:120px;width:100px;"/>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</body>
Lack of quotation marks and units.you need to specify whether your values are in pixels or ems ....try and use color coding codes, eg #fff or rgb(255 255 255) instead of of saying white.
Related
<html>
<body style="background:grey;">
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="
background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
height: 9px;
"></td>
</tr>
<tr>
<td style="
background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
height: 9px;
"></td>
</tr><tr>
<td><img width="500" src="https://s28.postimg.org/yrbcuftd9/zip.png"></td>
</tr>
</tbody>
</table>
</body></html>
I don't understand why the height of third zip image is 18. Basically, when I add the image as background,there is no gap between each row (No gap between row 1 and row 2). However, when I use image tag, it creates gap between row 2 and row 3. I don't understand why. Any ideas? And also how can I delete the gap between row 2 and there.
<img> is considered inline by default, so like other inline elements, it has a line height and space for descenders. Descender space is that little padding under each line that isn't accounted for anywhere, for the hanging bits of letters like in 'p' or 'q'.
If you set it to display: block, everything will click together.
A <td> tag will by default inherit display:table-cell; as a style. To resolve this, simply override that to flex.
<html>
<body style="background:grey;">
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="
background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
height: 9px;
"></td>
</tr>
<tr>
<td style="
background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
height: 9px;
"></td>
</tr><tr>
<td style="display:flex;"><img width="500" src="https://s28.postimg.org/yrbcuftd9/zip.png"></td>
</tr>
</tbody>
</table>
</body></html>
Anything added through the CSS is not considered 'content' by the browser.
The only reason you see the first two rows is because of the height:9px; CSS.
If you remove that you will see that the rows do not appear (0 height) this is because the rows do not contain any content so they rely on CSS to specify their dimensions.
Because the last <td> has content in the <img ... tag it will display the image with the standard table spacing as this has not been overridden by any css.
I'm trying to multiplication table in html, but it requires only a border below the top row and to the right of the left row. Everything within the table will not be separated by borders. However, I feel stumped because I think you cannot do this, is it even possible to only add a border to one cell?
edit: dear freinds i have discovered an image from the internet that demonstrates what I am trying to achieve. http://i.stack.imgur.com/y364h.jpg For my table, is it possible to only have borders corresponding to the bold border from the image within my html table?
You need to work with CSS. Here is a sample I am providing
<html>
<head>
<title>Border-Test</title>
<style>
.border-side {
border-right: 1px solid black;
}
.border-bottom td {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<table cellpadding="2" cellspacing="0">
<thead>
<tr><td colspan="5">Addition</td></tr>
</thead>
<tbody>
<tr class="border-bottom">
<td class="border-side"> </td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">0</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">1</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">2</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">3</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
Here is the output of above
NOTE : You need to change the table cell data which I haven't changed.
NOTE : You also must need to specify the cellspacing="0".
In IE (version 11 and likely older versions), I get a small vertical and/or horizontal gaps (or lines) in the border when I am using a radius on a TD in a nested table. The same problem occurs if I used a radius on DIV nested in a table. If I use Zoom function in IE, the lines will appear or display depending on the Zoom level. There is no problem in Firefox nor Chrome. And I am using the nesting, because I need the background color near the radius to be different than the background color of the enclosing table.
Here is a screenshot of the white line error:
[![enter image description here][1]][1]
Here is sample code:
<table style="width:50%;" cellspacing="0">
<tr>
<td style="background-color:#292F6C;">
sadasd
</td>
</tr>
<tr>
<td style="background-color: white;padding: 0px;border:0px;">
<table style="border-spacing:0px;width:100%;height: 10px;">
<tr>
<td style="background-color:#292F6C;-webkit-border-bottom-left-radius: 11px;-moz-border-radius-bottomleft: 11px;border-bottom-left-radius: 11px;"></td>
</tr>
</table>
</td>
</tr>
</table>
https://jsfiddle.net/f7e6qo1m/
Any suggestions?
Figured out that adding a 1px border on the square sides seems to fix the problem.
https://jsfiddle.net/f7e6qo1m/1/
<table style="width:50%;" cellspacing="0">
<tr>
<td style="background-color:#292F6C;">
sadasd
</td>
</tr>
<tr>
<td style="background-color: white;padding: 0px;border:0px;">
<table style="border-spacing:0px;width:100%;height: 10px;">
<tr>
<td style="background-color:#292F6C;-webkit-border-bottom-left-radius: 11px;-moz-border-radius-bottomleft: 11px;border-bottom-left-radius: 11px;border-top: 1px solid #292F6C;border-right: 1px solid #292F6C;"></td>
</tr>
</table>
</td>
</tr>
</table>
I want to write the simpliest example of the following image
My example should work in ie6,7,8,9 and so on. So I can't use float or anything helpfull. I made jsFiddle using table
<table width="500px">
<tr>
<td width="45px"><span>e-mail</span>
</td>
<td align="center"> <div style="border-bottom: 1px solid;">test#gmail.com</div></td>
</tr>
<tr>
<td width="45px"></td>
<td align="center"> <span>(email)</span>
</td>
</tr>
</table>
, but the bottom (email) have margin from the line.
And I want that everything was like on my first image. Thanks
I have tried this.
Check this jsFiddle link
<table width="500px" style="padding:0px; border-spacing:1px">
<tr>
<td width="45px" style="padding:0px"><span>e-mail</span>
</td>
<td align="center" style="padding:0px"> test#gmail.com <hr noshade style="border-top:1px; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-top: 0; -webkit-margin-bottom: 0;"/> </td>
</tr>
<tr>
<td width="45px" style="padding:0px"></td>
<td align = "center" style = "margin-top:0px; padding:0px">(email)</td>
</tr>
The “margin” you are referring to is partly spacing between cells, partly padding inside the cell, partly leading, and partly spacing in the font. In your approach, the simplest fix is probably to set cell spacing to zero and to move the cell content upwards a bit, using relative positioning.
<table width="500" cellspacing="0">
<tr>
<td width="45">e-mail
</td>
<td align="center" style="border-bottom: 1px solid">test#gmail.com</td>
</tr>
<tr>
<td width="45"></td>
<td align="center"><span style="position: relative; top: -0.15em">(email)</span>
</td>
</tr>
</table>
apply border-spacing: 0 to the table's style (border-collapse: collapsewould work too, aswell as cellspacing attribute)
add padding: 0 to the tdcontaining <span>(email)</span>
To increase the space between the upper e-mail-adress and the bottom border (which you did not mention explicitly but is not the same as your example image):
move the border-bottom style from div to its parent td
add a padding-bottom to the same td
See the following documents:
<table>
<tr>
<td>
<p>foo bar baz</p>
</td>
</tr>
</table>
and this:
td {
padding: 10px;
border-bottom: 1pt solid gray;
}
which results in something like
The rule is always the width of the table cell. Is there any CSS/HTML way of making the rule smaller (taking up less space horizontally)?
I need the rule to be some specified size which is smaller than the cell width. This is how it should look like (I hope you get the point - and the double dash is easy, of course):
123.44
2312.49
--------
12.12
1231.44
========
1234.33
Do you mean that the bottom border should be shorter than the width of the td? In that case this is not possible, however you could add an element that represents your border and give that element a width shorter than 100%. Technically I would advise a hr but div could do the same thing and is perhaps easier to understand.
HTML
<table>
<tr>
<td>
<p>foo bar baz</p>
<div style="width:75%;border-bottom:1px solid #000;"> </div>
</td>
</tr>
</table>
Live demo
http://jsfiddle.net/Zs9dG/
If you are going to have a paragraph in each table cell, why not put the border on that?
td > p {
display: inline;
border-bottom: 1pt solid gray;
}
Setting the <p> to display: inline will mean the border is as wide as the content inside it. You could then give the table cells more horizontal padding and you should end up with the effect you are after.
You can manage it with the html code, otherwise use ul and li it's much more convenient.
<table>
<tr>
<td>
<p>123.44</p>
</td>
</tr>
<tr>
<td>
<p>12312.49</p>
</td>
</tr>
<tr>
<td>
<p> -------- </p>
</td>
</tr>
<tr>
<td>
<p>12.12</p>
</td>
</tr>
<tr>
<td>
<p>1231.44</p>
</td>
</tr>
<tr>
<td>
<p> ======== </p>
</td>
</tr>
<tr>
<td>
<p> 1234.33 </p>
</td>
</tr>
</table>