Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
xbody += 
	'<div class="tab-pane" id="tab2"><div style="overflow:scroll; max-width:100%;height:auto;"><div class="row"><div class="col-md-12">'+
	'<table class="table table-striped table-bordered table-hover table-border-black font-dark">'+
	'<thead><tr>'+
   //HOW TO MAKE TH SIZE BIGGER FOR NAME & DATE?
	'<th style="width:70%">Staff Name</th>';
	var strArray = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
	var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
					
	$(dateArray).each(function($key2, $value2) {
		var dayName = days[$value2.getDay()];
		var d = $value2.getDate();
		var m = strArray[$value2.getMonth()];
		//var m = $value2.getMonth() + 1; //Month from 0 to 11
		var y = $value2.getFullYear();
       //HOW TO MAKE TH SIZE BIGGER FOR DATE
		xbody += '<th class="text-center" style="width="30%">' + dayName  + '<br />' + (d <= 9 ? '0' + d : d) + ' ' + (m<=9 ? '0' + m : m) + ' ' + y + '</th>'; //output list date (Thursday 20-02-2202)
		});
	xbody += '</tr></thead>'+
	'<tbody>';
	$.each(data.participant, function($key, $value) {
		xbody +='<tr><td>' +$value+ '</td>'; //output for list name
	$(dateArray).each(function($key2, $value2) {
							
			var d = $value2.getDate();
			var m = $value2.getMonth() + 1; //Month from 0 to 11
			var y = $value2.getFullYear();
			var date_training =  y + '-' +  (m<=9 ? '0' + m : m) + '-'  + (d <= 9 ? '0' + d : d);
			var status = '-';
							
		if (typeof attendance2 === 'object' && !Array.isArray(attendance2) && attendance2 !== null){
			if (attendance2.hasOwnProperty($key)) {			
				if (attendance2[$key].hasOwnProperty(date_training)){
					status = attendance2[$key][date_training];										
				} 
			}
		}
							
		<?php
			if	($mode = 'aa' &&  (in_array('HR', $isTrainingApproval) || $_SESSION[AppName]['hr_function'] == 1)) {
		?>
			xbody += '<td>' +
			'<select class="inp-attendance form-control" data-id_training="'+data.id_training+'" data-id_staff="'+$key+'" data-date_training="'+date_training+'" id="mySelect">';
								
			var xselect = '';
			if (status == '-'){
				xselect = " selected";
			}
			xbody +=  '<option value="-"'+xselect+' class="text-center"> - </option>';
								
			xselect = '';
			if (status == 'ATTEND'){
				xselect = " selected";
			}
			xbody +=  '<option value="ATTEND"'+xselect+'> ATTEND </option>';
								
			xselect = '';
			if (status == 'NOT ATTEND'){
				xselect = " selected";
			}
			xbody +=  '<option value="NOT ATTEND"'+xselect+'> NOT ATTEND </option>';
			xbody +=  '</select>' +
			'</td>';

		<?php } else { ?>
			xbody += '<td><p class = "form-control-static">'+status+' </p></td>';
			<?php } ?>
			//console.log(xselect);
			});
							
			xbody += '</tr>';
		});
					
		xbody += '</tbody>-Please contact HR person for attendance-</table></div></div></div>';
					xbody += '<a href="15002-hr-training-attendance-printout.php?id='+ data.id_training  +'" class="btn red" target="_blank"> Print Attendance </a>';
					xbody += '</div>';


What I have tried:

I try to add style width in the th column, but it did not detect any size. How to solve it?
Posted
Updated 5-Sep-22 23:00pm

1 solution

If you think about how you've currently got it setup, you've allocated 70% width to the first column ("Staff Name") and then 30% to each subsequent date column. If you end up displaying 7 days, then you're asking the browser to give the columns a total of 70% + (7 x 30%) = 280% width. That doesn't quite work and different browsers might behave differently.

Instead, if you omit the widths altogether then the browser should automatically size the columns to match the cell contents. If you're finding that the cell content is wrapping and you'd like to avoid that, you might need to look at increasing the width of the table altogether.

If you're set on having fixed widths for each column you'll need to calculate how many columns are going to be displayed, and then do some math to work out how much each column should be allocated. For example, if you want "Staff Name" to take up 50% of the table then you'll need to take the remaining 50% and divide it by the number of day columns you're expecting. If you're showing 4 days then you'll need to assign each column 12.5% width.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900