How do I get the IE gradient function here in this code sample to completely fill the table cell? With the code given below, I could only get it to cover the upper half of the cell. alt text http://img708.imageshack.us/img708/6602/celltext.png
<HTML>
<HEAD>
<style>
<!--table
.cl1
{
font-family:Comic Sans MS;
font-size:11.0pt;
color:#800000;
border-left:1.5pt solid #000000;
border-top:1.5pt solid #000000;
border-right:1.5pt solid #000000;
border-bottom:1.5pt solid #000000;
background-color:#ffffff;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#ffffff', EndColorStr='#99cc00')
progid:DXImageTransform.Microsoft.dropshadow(Color='#660000', Positive='true', OffX=0, OffY=0);
}
-->
</style></HEAD>
<BODY>
<table x:str cellspacing=0 style='table-layout:fixed; border-left:1.0pt solid; border-top:1.0pt solid; border-right:1.0pt solid; border-bottom:1.0pt solid; border-left-color:#c0c0c0; border-top-color:#c0c0c0; border-right-color:#c0c0c0; border-bottom-color:#c0c0c0; '>
<col style='width:67pt;'>
<tr style='height:28.00pt'>
<td class=cl1 style='width:67pt;'>Cell Text</td>
</tr>
</BODY>
</HTML>
I added the line:
line-height: 220%;
To your .cl1 style, and it filled completely. Obviously this is not a final fix, but it definitely points to the line-height property as having something to do with it.
Related
I have a fairly simple table with two rows, each of which has one cell. The table has a colored border. The top row/cell has a white background. The bottom row/cell has a colored background. The problem is that the bottom row/cell has a thin, white border that I do not want there. Can anyone suggest a code modification to get rid of that border? My code is below, and here is a screenshot with the purple arrows pointing to the border that I am trying to eliminate. Thanks for any suggestions.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.table1 {
border: 4px solid #FF7C7C;
float: initial;
}
.td1 {
width: 530px;
padding: 5px 35px 5px 35px;
font-family: verdana, geneva, sans-serif;
font-size: 16px;
line-height: 22px;
color: #62605d;
text-align: left;
vertical-align: top;
}
</style>
</head>
<body>
<table class="table1">
<tr class="td1">
<td class="td1" style="text-align: center;">
Text line 1.<br />
Text line 2.<br />
Text line 3.
</td>
</tr>
<tr style="border-style: none;">
<td class="td1" style="border: none; border-spacing: 0px; background-color: #FF7C7C; color: #ffffff; font-size: 11px; text-align: center;">
Text line 1.<br />
Text line 2.<br />
Text line 3.
</td>
</tr>
</table>
</body>
</html>
UPDATE: Thank you to #Alohci, #lv_ and #PleaseDontHurtMe.jpeg for those quick responses. Interestingly, the border-spacing tag for table fixed the problem when previewed on w3schools, but when I made the change in Visual Studio the border remained. I had to add the border-collapse tag to fix it for Visual Studio. Ah, the mysteries of HTML...
Try border-collapse: collapse; in your .table1
Table has default border-spacing
.table1 {
border-spacing: 0;
}
I have been trying to work out getting a similar table to a picture that I have been studied from. Which looks like:
However I have been getting something similar:
This is what I have done:
However im getting issues when it comes to:
Underscore line under the bold text, Which I managed to only get on a small text which I wish to get in the whole line
Also I want to adjust the Size of the table so it gets stuck like in the first picture. I don't know if I did the correct way now but I assume iam on the correct way. Maybe someone here can help me out seeing the issue.
table {
border: 1px solid black;
background-color: #ffcc99;
}
tr.hello {
background-color: #000000;
color: #ffffff;
}
tr.bigtext {
font-weight: bold;
}
</style>
</head>
<body>
<h5>Tabell 2</h5>
<table style="width:100%">
<tr class="bigtext">
<td><u>Studenter</u></td>
<td><u>17000</u></td>
</tr>
<tr>
<td>Högskoleingejör</td>
<td>2800</td>
</tr>
<tr>
<td>Ekonomi</td>
<td>1800</td>
</tr>
<tr>
<td>Fristående kurser</td>
<td>8300</td>
</tr>
<tr class="hello">
<td>Cirka 600 utländska studenter ingår i det totaala antalet studenter</td>
</tr>
</table>
</body>
</html>
You have done all almost correct, except you should:
not underline the border stuff.
not use <u> tags.
use the colspan for the full width.
And your code seems to be incomplete. Here's your updated code:
table {
border: 1px solid black;
background-color: #ffcc99;
}
tr.hello {
background-color: #000000;
color: #ffffff;
}
tr.bigtext td {
font-weight: bold;
border-bottom: 1px solid #000;
}
<h5>Tabell 2</h5>
<table style="width:100%">
<tr class="bigtext">
<td>Studenter</td>
<td>17000</td>
</tr>
<tr>
<td>Högskoleingejör</td>
<td>2800</td>
</tr>
<tr>
<td>Ekonomi</td>
<td>1800</td>
</tr>
<tr>
<td>Fristående kurser</td>
<td>8300</td>
</tr>
<tr class="hello">
<td colspan="2">Cirka 600 utländska studenter ingår i det totaala antalet studenter</td>
</tr>
</table>
Preview
This is how I did it. I added the following under the bigtext tr class:
<tr class="underline">
<td class="underline" colspan="2"></td>
</tr>
and I added the following CSS to fix the fonts and the underline:
.underline {
border-top: solid 1px black;
}
tr:not(.bigtext) td:first-child{
font-family: Papyrus, fantasy;
}
tr:not(.bigtext) td:not(first-child){
font-family: Georgia;
}
tr.bigtext td:not(first-child){
font-family: Georgia;
}
The table width has also been adjusted. So the in-line CSS style was removed and this was added to your table css:
width: 70%;
Here is the JSFiddle demo
My pen: http://codepen.io/helloworld/pen/gimoI
I want to have a gray and white border on a table row to achieve a 3d effect.
Why is only one border color visible?
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<table style="width:100%;">
<tr>
<td style="vertical-align:top;width:60px;">Alarm 1</td>
<td style="width:auto;">
<span style="font-weight:bold;">Brand LANG: </span>
<span>Helmenstraße 5</span>
<span>90000 Nürnbergxxxxxxxxx</span>
</td>
<td style="width:30px;text-align:center;"> <i class="icon-angle-down button"></i></td>
</tr>
<tr>
<td style="width:60px;vertical-align:top;">
<div style="border-radius:28px;border:black solid 1px;background:red;">Alarm 1</div>
</td>
<td style="width:auto;">
<span style="font-weight:bold;">Brand LANG: </span>
<span>Langenburgerwald allee 25/c</span>
<span>70000 Wurmlingen ob der Tauber</span>
</td>
<td style="width:30px;text-align:center;"> <i class="icon-angle-down button"></i></td>
</tr>
</table>
body,html{
padding:0;
margin:10px;
background:#fafafa;
}
table{
border-collapse:collapse;
border-spacing:0;
}
table td
{
padding: 5px;
}
td {
border-bottom: gray solid 2px;
border-top: white solid 2px;
background:green;
}
Because the top border is white and is difficult to see the diference with the background.
I just updated it now:
body,html{
padding:0;
margin:10px;
background:#fcc;
}
table{
border-spacing:0px;
}
table td
{
padding: 5px;
border-bottom: gray solid 2px;
border-top: white solid 2px;
}
tr {
background:green;
}
You have to remove border-collapse:collapse;
Check this [http://codepen.io/anon/pen/vIHcf][1]
You need to work with box shadows . I just also described it in my one of the answer of same type of questio Link to that Answer or you can go through to this link to learn more about box-shadowsStudy box shadow
you can add
-webkit-box-shadow:10px 10px 5px #595959; -moz-box-shadow:10px 10px 5px #595959; -o-box-shadow:10px 10px 5px #595959;
in your td style & then find that is it same as you want ..
Both are visible on my side.
Little alternative or addition to achive 3d effects:
You can use CSS Outline. Its like a second border.
http://www.w3schools.com/css/css_outline.asp
I see the blank and grey border. But if you want to put some 3d effect on the rows why don't use box-shadow?
box-shadow: inset 1px 1px 3px #000;
Here I made an example with your code.
I am new to CSS and have a small problem.I am creating a news feed page and want to separate each feed from the other.see the image i have attached to see what i exactly want.
heres what i have tried so far...
<html>
<style type = text/css>
td.border
{
border-right-style: hidden;
border-left-style: hidden;
border-top-style: hidden;
border-bottom-color: #999;
}
</style>
<table width="90%" align="center" cellpadding="4" bgcolor="#A6D2FF">
<tr>
<td width="7%" bgcolor="#FFFFFF">Name<br />
</td>
<td width="93%" class = "border" bgcolor="#D9ECFF"> <span style="font-size:10px; font-weight:bold; color:#A6A6A6;">Date</span><br />
ufeed</td>
</tr>
</table>
</html>
You should try use border-top/left/right/bottom instead of *-style and *-color:
td.border
{
border-right: none;
border-left: none;
border-top: none;
border-bottom: 1px #999 solid;
}
And as mentioned above - you shouldn't use table for things like that.
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.