Ajustar tabla a div A4

manoloohara · #1 (**permalink**) 27/12/2011, 15:45

Saludos.
He diseñado un calendario en HTML, utilizando las medidas de un A4. El usuario puede aumentar el tamaño de la letra del mes mediante javascript.
La tabla del calendario es de 7x6, ya que si el mes comienza en domingo y el mes tiene 31 dias, deberá acabar en la sexta fila.
Dentro del div month_calendar_id, que coincide con un A4, se encuentra el nombre del mes y la tabla con los días.
Tengo algunas dudas con el CSS que no sé resolver.
Los problemas que tengo son:
1) La tabla se sale de las dimensiones del div month_calendar_id y queda cortada. ¿Cómo puedo mantener la tabla dentro de las dimensiones del div month_calendar_id?
2) Si aumento la letra del mes con el javascript del código, la tabla continúa teniendo las mismas dimensiones, pero quiero que se redimensione y que se ajuste al tamaño del div month_calendar_id. ¿Cómo lo hago?

Gracias y feliz año!

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Calendari</title>
<script type="text/javascript">
/*<![CDATA[*/
function zxcSV(obj,par){
if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}

function change_font_size()
{
var obj=document.getElementById("month_id");
var fs=parseFloat(zxcSV(obj,'font-Size'));
obj.style.fontSize = (fs + 10) + "px";
var obj=document.getElementById("month_calendar_id");
}
/*]]>*/
</script>  
  

<style type="text/css">

.month_calendar{width:297mm;height:210mm;overflow:hidden;}
.taula_interior{width:100%;height:100%;}
.month{
		font-family:  sans-serif;
        font-size: 48px;
		text-align:center;
      }
.dia_semana{text-align: center; height: 10mm;}
</style>
</head>
<body class="yui3-skin-sam">

<div>
<a href="#" onclick="change_font_size();" >Increase font size</a>
</div>
<div class="month_calendar" id="month_calendar_id">
 <div class="month" id="month_id">Enero</div><br>
 <div class="taula_interior">
	<table style="text-align: left;width:100%;height:100%;" border="1" cellpadding="2" cellspacing="2">
	  <tbody>
		<tr  >
		  <td class="dia_semana">Lunes</td>
		  <td class="dia_semana">Martes</td>
		  <td class="dia_semana">Miercoles</td>
		  <td class="dia_semana">Jueves</td>
		  <td class="dia_semana">Viernes</td>
		  <td class="dia_semana">Sabado</td>
		  <td class="dia_semana">Domingo</td>
		</tr>
		<tr>
		  <td >D1<br></td>
		  <td >D2<br></td>
		  <td >D3<br></td>	
		  <td >D4<br></td>
		  <td >D5<br></td>
		  <td >D6<br></td>	
		  <td >D7<br></td>  
		</tr>
		<tr>
		  <td >D8<br></td>
		  <td >D9<br></td>
		  <td >D10<br></td>
		  <td >D11<br></td>
		  <td >D12<br></td>
		  <td >D13<br></td>
		  <td >D14<br></td>
		</tr>
		<tr>
		  <td >D15<br></td>
		  <td >D16<br></td>
		  <td >D17<br></td>
		  <td >D18<br></td>
		  <td >D19<br></td>
		  <td >D20<br></td>
		  <td >D21<br></td>
		</tr>
		<tr>
		  <td >D22<br></td>
		  <td >D23<br></td>
		  <td >D24<br></td>
		  <td >D25<br></td>
		  <td >D26<br></td>
		  <td >D27<br></td>
		  <td >D28<br></td>
		</tr>
		<tr>
		  <td >D29<br></td>
		  <td >D30<br></td>
		  <td >D31<br></td>
		  <td >D32<br></td>
		  <td >D33<br></td>
		  <td >D34<br></td>
		  <td >D35<br></td>
		</tr>
		<tr>
		  <td >D36<br></td>
		  <td >D37<br></td>
		  <td >D38<br></td>
		  <td >D39<br></td>
		  <td >D40<br></td>
		  <td >D41<br></td>
		  <td >D42<br></td>
		</tr>
		<tr>
	  </tbody>
	</table>
   </div>
</div>
</body></html>