External CSS not possible with CMS, need to restructure table with inline CSS
I'm currently trying to restyle some tables, and only after I finished the
separate CSS and HTML files I realized that our CMS tool goes crazy when I
try to refer to another external stylesheet. I've looked around and it
seems like some people suggest iframes to deal with this issue, but I'd
prefer not to if possible.
What I think needs to happen is go with inline style tags, but I'm not
sure how to recreate some of this stuff with inline code. Any suggestions?
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<body>
<style type="text/css">
/* CSS Document */
table { height:auto; width:520px; border-collapse:collapse;}
th{ font-family: 'Trebuchet MS', 'Trebuchet MS', Arial, Helvetica,
sans-serif; font-
size:25px; background:#333; padding:3px; }
.color{ color:#FFF; padding-left:65px;}
.color1{ color:#FFF; float:left; text-align:center; padding-left:54px;}
td { padding:5px 9px 10px 10px;}
.td1 { font-family: 'Trebuchet MS', 'Trebuchet MS', Arial, Helvetica,
sans-serif;
width:190px; font-size:12px; font-weight:500; }
.tr1 { background:#b8b9b9; }
.tr2 {background:#cfd0d1;}
/*td2 controls the right column*/
.td2 { font-family: 'Trebuchet MS', 'Trebuchet MS', Arial, Helvetica,
sans-serif;
width:310px; font-size:12px; font-weight:500px;}
.td2{ width:310px;}
/* For a slant corner*/
.slant-right {border-bottom:15px solid transparent;
border-right: 15px solid white;
position:relative;
left:4px;
top:-4px;
float:right;
}
/*for slant corner in bottom*/
.slant-left {
border-top:15px solid transparent;
border-left:15px solid white;
position:relative;
float:left;
right:11px;
top:15px;
}
</style>
<table border="1px" bordercolor="#FFFFFF">
<tbody><tr>
<!--<th><span class="color">Features</span></th>-->
<th colspan="2"><span class="color1">Title 1</span><span
class="color">Title 2</span><span><div class="slant-right"></div></span></th>
</tr>
<tr class="tr1">
<td class="td1">Content 1</td>
<td class="td2">Content 2</td>
</tr>
<tr class="tr2">
<td class="td1">Content 3</td>
<td class="td2">Content 4</td>
</tr>
<tr class="tr1">
<td class="td1">Content 5</td>
<td class="td2">Content 6</td>
</tr>
<tr class="tr2">
<td class="td1">Content 7</td>
<td class="td2">Content 8</td>
</tr>
<tr class="tr1">
<td class="td1">Content 9<span><div
class="slant-left"></div></span></td>
<td class="td2">Content 10</td>
</tr>
</tbody></table>
</div>
</body></html>
No comments:
Post a Comment