I have the following code:
<!DOCTYPE html>
<html>
<head>
<style>
.tl, .tr, .bl, .br, .b, .t {
background: #f00;
width: 16px;
height: 16px;
}
.m {
background: url('https://www.google.com/images/logos/ssl_logo_lg.gif') #0f0;
}
table {
width: 512px;
height: 512px;
border-spacing: 0px;
border-collapse: collapse;
table-layout: fixed;
}
</style>
</head>
<body>
<table>
<tr>
<td class="tl"> </td>
<td class="t"> </td>
<td class="tr"> </td>
</tr>
<tr>
<td> </td>
<td class="m">test</td>
<td> </td>
</tr>
<tr>
<td class="bl"> </td>
<td class="b"> </td>
<td class="br"> </td>
</tr>
</table>
</body>
</html>
It works fine as long as I don't look at it with IE7. IE7 for some reason does not respect my width and height set to 16px and instead makes all rows and columns to take the average size. Oddly, this works in the Quirks mode though, but now in the standards mode, what's up?
P.S. Is there any other way of accomplishing a similar layout that has 16x16 corners, 16px top and bottom while the middle fits in?
give height:100%; for .m
Try giving each cell some content:
<td class="tl"> </td>
that should fix it.
border-spacing and border-collapse are not supported in IE7 and below. Try using
<table cellspacing="0" cellpadding="0">
Update:
I don't have IE7 nor IE6 here, so this is just a guess: try setting the width and height of .m to auto. If that doesn't work (since that would be too easy, right? :)), you can set the dimensions manually to 480px (512 - 2 * 16)
Try this:
<style>
table {
width: 512px;
border-spacing: 0px;
border-collapse: collapse;
table-layout: fixed;
}
table .m
{
background: url('https://www.google.com/images/logos/ssl_logo_lg.gif') #0f0;
height: 512px;
}
.tl, .tr, .bl, .br, .b, .t {
background: #f00;
width: 16px;
height: 16px;
}
</style>
Related
I am trying to find a way to make a cell transparent or semi-transparent. The below code should work but doesn't:
<html>
<style>
op {
opacity:0.3;
filter:alpha(opacity:30)
}
</style>
<body background="background.jpg" style="background: black;">
<table border="1" width="100%" height="222">
<tr>
<td class="op" bgcolor="#FFFFFF" height="216"> </td>
</tr>
</table>
</body></html>
You haven't properly defined the CSS class, class definition must begin with a dot, in your case .op.
Also, your are mixing CSS and HTML attributes, you should only only CSS (note that definitions for HTML tags don't start with a dot):
<html>
<style>
body {
background-image: background.jpg;
background-color: black; /* for testing without the image*/
}
table {
border: 1px;
width: 100%;
height: 222px;
}
td {
height: 216px;
}
.op {
opacity:0.3;
filter:alpha(opacity:30);
background-color: #FFFFFF;
}
</style>
<body>
<table>
<tr>
<td class="op"> </td>
</tr>
</table>
</body></html>
I have a 5-column table whose first and last columns have fixed (and different) widths. How do I force the 3 center columns to be equally distributed across the remaining width of the table?
HTML:
<table>
<tr>
<td id="first">A<td>
<td id="second">B<td>
<td id="third">C<td>
<td id="fourth">D<td>
<td id="fifth">E<td>
</tr>
</table>
CSS:
table { width: 100%; }
td#first { width: 100px; }
td#fifth { width: 200px; }
When the browser is 1200px wide, I want #second, #third, and #fourth to be ( 1200 - ( 100 + 200 ) ) / 3 = 300px wide. Ideally I would not be making changes to the HTML's structure.
Thanks!
Edit: Ideally this would work regardless of the number of non-fixed-width columns.
Answer:
Thanks to user Chris below for his answer. This is the minimum CSS (minus the border) that makes it work: http://plnkr.co/edit/3K5hE0Kn5D9S7bIDbOPl?p=preview
How about trying the following?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style type="text/css">
table{width: 100%; font-size: 0; line-height: 12px; table-layout: fixed;}
td {border: 1px solid black; }
#first{ min-width: 10px; width: 10px; }
#second{ min-width: 20px; width: 20px; }
</style>
</head>
<body>
<table>
<td id="first"> </td>
<td id="second"> </td>
<td id="third"> </td>
<td id="fourth"> </td>
<td id="fifth"> </td>
</table>
</body>
</html>
Plunker: http://plnkr.co/edit/SRo9hcIVxFznFbbzA2fq?p=preview
I was try to create a responsive email template.everything work fine,except image border.
I set border for an image and media styles.but in small screen,image border will be crpped.
HTML
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<style type="text/css">
#media only screen and (max-width: 480px) {
.message_mobile {
width: 100% !important;
}
}
</style>
</head>
<body id="message_body" style="background-color:white;" >
<table style="border: 0px; border-collapse: collapse; border-spacing: 0px; width: 600px; display: table;" align="center" class="message_mobile"><tbody><tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" style="border: 0px; border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: hidden;">
<tbody><tr>
<td style="vertical-align:top;text-align:center;">
<div>
<img src="http://www.myfico.com/Images/sample_overlay.gif" alt=" " style="border: 16px solid rgb(196, 45, 196); display: block; width: 100%; padding: 2px; max-width: 94.64882943143813%;" width="auto">
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Output (Large screen)
Output (Small Screen)
Fiddle Demo
You could set box-sizing to border-box, however since this is a relatively new property, not all browsers (especially email clients) may support it.
I'm trying to get a table to be 100% width of a div...
But when I use width=100% it expands outside of the borders... When using on different devices...
So I'd just like this table, across full width - and the N/A button right aligned...
Seems it is always extending past borders on different devices...
<div class=flist>
<table cellpadding=2 border=1>
<tr>
<td valign=middle>
<img src="images/plus.png" height=14 width=14 border=0 align=middle> <b>General Stuff</b>
</td>
<td align=right>
<input type="button" name="CheckAll" value="All N/A" class=verd8></td>
<td> </td>
</tr>
</table>
</div>
Take this example :
<html>
<body>
<head>
<style>
.flist{
border:1px solid red;
padding:5px;
width:500px;
}
table{
width:100%;
border:1px solid;
}
</style>
</head>
<div class="flist">
<table cellpadding="2" border="1">
<tr>
<td valign=middle>
<b>General Stuff</b>
</td>
<td align=right>
<input type="button" name="CheckAll" value="All N/A" class=verd8></td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
Just an inline css example, but it works if you change .flist width the table width changes, note the red color of the .flist versus black of table.
div.flist{width:500px;}
div.flist table{width:100%;}
This should work in most cases.
if you need mobile, use media queries instead.
Adding 1% each side is = 20px so just minus that from the table width. 1% = 10px;
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
table{
width: 100%;
border-spacing: 0;
border-collapse: collapse;
empty-cells:show;
}
table.bordered{
border-collapse:separate;
border:1px solid #ccc;
border-radius:4px;
}
th,td{
vertical-align:top;
padding:0.5em;
}
tr:nth-child(2n){
background-color:#f5f5f5;
}
-
<table class="bordered">
<tbody></tbody>
</table>
Just write table tag like this
<table width=100%></table>
This might have worked
Added this also into table
style="table-layout:fixed"
.flist {
font-family: Verdana; font-size: 13pt; font-weight: bold;
overflow: hidden;
position: relative;
background-color: #e9e9e9;
padding: 5px;
margin-top: 5px;
margin-left: 1%;
margin-right: 1%;
border: 1px solid #000;
}
.flist > table
{
width: 100%;
}
<div class=flist>
<table cellpadding=2 border=0 style="table-layout:fixed">
<tr>
<td valign=middle>
<b>General</b>
</td>
<td align=right>input type="button" name="CheckAll" value="All N/A" class=verd8></td>
</tr>
</table>
</div>
Is there a way Firefox keeps the row height, so if data doesn't fill all the body heigth it keeps an empty space below last row? IE behaves this way, so all rows stay on the top.
I want to code a scroll table with fixed header; sometimes there's not sufficient data on table content to fill the fixed table height.
A sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="reset.css"/>
<style type="text/css">
* {margin:0}
table {
border: solid #66CC99;
border-width: 0px 1px 1px 0px;
width: 400px;
}
th, td {
border: solid #66CC99;
border-width: 1px 0px 0px 1px;
padding: 4px;
}
th {
background-color: #339999;
color: #FFFFFF;
}
tr.alt td {
background-color: #EEEEEE;
}
tbody {
height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
</style>
<!--[if IE]>
<style type="text/css">
div {
position: relative;
height: 200px;
width: 416px;
overflow-y: scroll;
overflow-x: hidden;
border: solid #66CC99;
border-width: 0px 0px 1px 0px;
}
table {
border-width: 1px 1px 0px 0px;
}
thead tr {
position: absolute;
top: expression(this.offsetParent.scrollTop);
}
tbody {
height: auto;
}
table tbody tr:first-child td {
padding: 29px 4px 4px 4px;
}
</style>
<![endif]-->
</head><body>
<table class="treeTable" id="table" cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<th id="col1" class="text" style="width: 100%;" nowrap="nowrap">NAME</th>
<th class="selectable" style="width: 14em;" id="th-122002" nowrap="nowrap">12/2002</th>
<th class="selectable" style="width: 14em;" id="th-122007" nowrap="nowrap">12/2007</th>
<th class="selectable" style="width: 14em;" id="th-072010" nowrap="nowrap">07/2010</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>
Name
</td>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
</tr>
</tbody>
</table>
</body></html>
One solution that works to a certain extent but doesn't seem perfect is to add this as the last row:
<tr style="height: 100%;"></tr>
It seems to create an empty row that is the size of the area meaning that you can scroll off the bottom til there is only white space which probably isn't ideal. You might be able to play with this a bit (possibly do some rough calculations to work out a sensible height based on how many rows you have) to get a working solution.
Did you specify the height attribute, set it to desired value and then see.
Can you possibly paste your code? I'd also recommend using a reset.css to remove any prejudice different browsers have interpreting your code.
You can set ' ' as a data if there is no value or you can do is set style attribute to your 'td' tag as <td style="height: 15px;"> </td>