This is an excert from a dynamically built table. What is the proper CSS to make the first <td> in the second rwo (id='backdate') a fixed width? (currently it does not change width when increasing or decreasing the 70 value)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table class='fifo' width='850' style='width:850px;table-layout:fixed;'>
<thead><tr>
<th colspan='3' style='width:820px;'>Details</th>
<th style='cursor:pointer;width:15px;' title='Click to save.'><span class='ui-icon ui-icon-check'/></th>
<th style='width:15px;' title='Click to close.'><span class='ui-icon ui-icon-closethick'/></th>
</tr></thead>
<tbody>
<tr><td id='BACKDATE' colspan='1' class='button' style='cursor:pointer;width:70px;' width='70' title='Back Date Start Date/time.'>Back Date</td>
<td colspan='4' style='width:780px;' width='780'><b>Start Date: </b></td></tr>
</tbody>
</table>
</body>
</html>
FIDDLE WITH SOLUTION...
Adding a dummy row with the widths that the browser 'displays', but isn't seen solves the problem. To get rid of the extra border, I had to add border-top-width:0px; to the table's style.
HTML
<tr>
<th class='test' style='width:80px;'/>
<th class='test' style='width:560px;'/>
<th class='test' style='width:150px;'/>
<th class='test' style='width:15px;'/>
<th class='test' style='width:15px;'/>
CSS
.test {
padding:0px!important;
border-width:0px!important;
height:0px!important;
}
Related
Here is my current code for my table. I am trying to make the table header "Famous Monsters by Birth Year" the color red and cannot figure out for the life of me how to do it.
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2">Famous Monsters by Birth Year</th>
</tr>
<tr style="border-bottom:1px solid black;">
<th style="padding:5px;"><em>Famous Monster</em></th>
<th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;">King Kong</td>
<td style="padding:5px;border-left:1px solid black;">1933</td>
</tr>
<tr>
<td style="padding:5px;">Dracula</td>
<td style="padding:5px;border-left:1px solid black;">1897</td>
</tr>
<tr>
<td style="padding:5px;">Bride of Frankenstein</td>
<td style="padding:5px;border-left:1px solid black;">1944</td>
</tr>
</tbody>
</table>
</body>
</html>
If you do not want to use a separate CSS file and simply want to make the header red within your html you can do the following:
<th colspan="2"><font color="red">Famous by Birth Year</font></th>
But as the collor attribute of the font tag is not supported by HTML5 I would recommend using in-line CSS:
<th colspan="2" style="color:red">Famous by Birth Year</th>
I am a new programmer AngularJS, and i have a problem trying to achieve a specific template for a table.
I would like to achieve the following table, but can not find how to do it:
<!DOCTYPE HTML>
<html >
<head>
<title></title>
</head>
<body >
<table border="1" width="50%" cellspacing="0" cellpadding="3">
<tbody>
<tr>
<th colspan="33">XXXXXXXXXXXXXXXXXXXXXXX</th>
</tr>
<tr>
<th rowspan="2"> </th>
<th colspan="2">P1</th>
<th colspan="2">P2</th>
<th colspan="2">P3</th>
</tr>
<tr >
<th >INFO1</th>
<th >INFO2</th>
<th >INFO1</th>
<th >INFO2</th>
<th >INFO1</th>
<th >INFO2</th>
</tr>
</tbody>
</table
</body>
</html>
I have the following code in AngularJS however I can not repeat th because there is no html element that wraps:
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<title></title>
<script src="js/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller("myCTL",['$scope',function($scope){
$scope.datas=[{id:'1', name:'P1',pct:'10'},{id:'2', name:'P2',pct:'70'},{id:'3', name:'P3',pct:'66'}]
}])
</script>
</head>
<body ng-controller="myCTL">
<table border="1" width="50%" cellspacing="0" cellpadding="3">
<tbody>
<tr>
<th colspan="33">XXXXXXXXXXXXXXXXXXXXXXX</th>
</tr>
<tr>
<th rowspan="2"> </th>
<th colspan="2" ng-repeat="data in datas">{{data.name}}</th>
</tr>
<tr>
ng-repeat ="data in datas" [START]
<th >INFO1</th>
<th >INFO2</th>
ng-repeat [END]
</tr>
</tbody>
</table
</body>
</html>
Please if anyone knows how to solve this problem would greatly appreciate it.
Thanks a lot in advance.
Use ng-repeat-start and ng-repeat-end:
<tr>
<th ng-repeat-start ="data in datas">INFO1</th>
<th ng-repeat-end>INFO2</th>
</tr>
I'd like to ask something as I am really baffled why this happens and browser debug methods cannot tell me why this strange addition of a th element occurs.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Stuff Page</title>
</head>
<body>
<center>
<div>
<br/><br/>
<form method="POST">
Find Pattern
<input type="text" name="pattern" value="" /><input type="submit" value="Find" />
<input type="reset" value="Clear" />
</form>
</div>
</center>
<center>
<div>
<table>
<caption>Table Rendering of Found Data</caption>
<thead>
<tr>
<th scope="col" class="column1">Name<th>
<th scope="col">Type</th>
<th scope="col">Size</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</div>
</center>
</body>
</html>
If you take that segment of html code and run it in a browser (I tested it with latest chrome and ff) it adds one more th element in the table (the final page has 4 columns instead of 3) and I have absolutely no clue why this happens! If someone can tell me the reason behind it I'd be glad!
You didn't close your tag.
"<th scope="col" class="column1">Name<th>"
The last <th> should be </th>
Check this line again:
<th scope="col" class="column1">Name<th>
I'm sending email in Oracle 11g with apex_mail.send function. I have below html structure. I have added style for table in this html. but when i open received email, style is not applied to the table. only text is visible.
How can i solve this ?
<html>
<head>
<style>table{border-collapse:collapse;}table,td,th{border:1px solid grey;}td,th{padding:5px;}</style>
</head>
<body>
<table width="100%">
<tr>
<th scope="col">Company</th>
<th scope="col">Amount</th>
<th scope="col">Reference</th>
<th scope="col">Note</th>
</tr>
<tr>
<td>HNB</td>
<td>226</td>
<td>..952</td>
<td>Insurance payment.</td>
</tr>
<tr>
<td>AC</td>
<td>2150</td>
<td>..255</td>
<td>A/C service.</td>
</tr>
</table>
</body>
</html>
I am making a calendar using the following HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<table border="1">
<tr>
<td colspan="2">Mon</td>
<td colspan="2">Tue</td>
<td colspan="2">Wed</td>
<td colspan="2">Thu</td>
<td colspan="2">Fri</td>
</tr>
<tr>
<td colspan="1">Item1</td>
<td colspan="9">Item2</td>
</tr>
</table>
</body>
Each day has a colspan of 2 so that I can show whether an item takes place just in the morning or for a whole day etc.
In the above example I want "Item1" to show in the first cell (Mon morning) and "Item2" to show from Mon afternoon through to Fri.
However, when viewing the output, "Item1" is taking up the whole of Mon and "Item2" is displaying from Tue to Fri.
Is it possible to do what I am trying to do?
Thanks
I think the problem is that you'll actually have to have a row with colspan="1" in order for your spans to actually work.
If you're actually representing am/pm in your calendar, why not just add a row under the "Mon Tue ... Fri" row, like so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
td,th { min-width: 50px; }
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th colspan="2">Mon</th>
<th colspan="2">Tue</th>
<th colspan="2">Wed</th>
<th colspan="2">Thu</th>
<th colspan="2">Fri</th>
</tr>
<tr>
<th>AM</th>
<th>PM</th>
<th>AM</th>
<th>PM</th>
<th>AM</th>
<th>PM</th>
<th>AM</th>
<th>PM</th>
<th>AM</th>
<th>PM</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1">Item1</td>
<td colspan="9">Item2</td>
</tr>
</tbody>
</table>
</body>
</html>
I also put the headers into a <thead> and the actual items into a <tbody>, and made the headers <th> tags instead of <td>.
Try this:
<td colspan="1">Item1</td>
<td colspan="1"> </td>
<td colspan="8">Item2</td>