Entonces también tendrás que modificar tu javascript en todos los casos casos como este: cantidad.style.width = '50px';, donde colocás las medidas en px; en esos casos tendrás que colocar cantidad.style.width = '100%';
Así:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Crear inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//Inicializamos el contador
var cont = 0;
//Función Añadir linea
function addLine(ID, orden, detalles, cantidad, total) {
//Sumanos uno al contador
cont++;
tab = document.getElementById('tabla');
fila = document.createElement('tr');
//Input Id
celdaorden = document.createElement('td')
id=document.createElement('input')
//alert(id.nodeName)
//id.type='hidden';
id.type='hidden';
id.name='id'+cont;
id.id='id'+cont;
id.value = ID;
celdaorden.appendChild(id);
//Input Orden
orden = document.createElement('input')
orden.style.width = '100%';
orden.name='orden'+cont;
orden.id='orden'+cont;
orden.value = orden;
celdaorden.appendChild(orden);
fila.appendChild(celdaorden);
//Input detalles
celdadetalles = document.createElement('td');
detalles = document.createElement('input');
detalles.style.width = '100%';
detalles.name='detalles'+cont;
detalles.id='detalles'+cont;
detalles.value = detalles;
celdadetalles.appendChild(detalles)
fila.appendChild(celdadetalles);
//Input Cantidad
celdacantidad = document.createElement('td');
cantidad = document.createElement('input');
cantidad.style.width = '100%';
cantidad.name='cantidad'+cont;
cantidad.id='cantidad'+cont;
cantidad.value = cantidad;
celdacantidad.appendChild(cantidad)
fila.appendChild(celdacantidad);
//Input tarifa
celdatarifa = document.createElement('td')
tarifa =document.createElement('input')
tarifa.style.width = '100%';
tarifa.name='tarifa'+cont;
tarifa.id='tarifa'+cont;
tarifa.value = tarifa;
celdatarifa.appendChild(tarifa);
fila.appendChild(celdatarifa);
//Input Total
celdatotal = document.createElement('td')
total = document.createElement('input');
total.style.width = '100%';
total.name='total'+cont;
total.id='total'+cont;
total.value = total;
celdatotal.appendChild(total)
fila.appendChild(celdatotal);
//Boton Borrar
celdaborrar = document.createElement('td')
borrar = document.createElement('input')
borrar.type='button';
borrar.name='orden'+cont;
borrar.id='orden'+cont;
borrar.value = 'Borrar';
borrar.onclick=function() {
tab = document.getElementById('tabla');
padre = this.parentNode.parentNode;
tab.removeChild(padre);
//Restamos uno al contador
cont--;
//actualizamos el contador
document.getElementById('contador').value = cont;
}
celdaborrar.appendChild(borrar);
fila.appendChild(celdaborrar);
tab.appendChild(fila)
//actualizamos el contador
document.getElementById('contador').value = cont;
}
</script>
</head>
<body>
<form><?php echo "Respuesta:<br><textarea cols=\"50\" rows=\"8\" readonly=\"true\">" . print_r($_POST, true) . "</textarea><br><br>"; ?><br><br></form>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div align='right'><a href='#' onclick='addLine(++document.getElementById("contador").value, 22, 33, 44, 55);return false'>Añadir Linea +</a></div>
<table width="100%">
<tr>
<td width="50" align="center"><strong>Orden</strong></td>
<td align="center" width="100%"><strong>Detalles</strong></td>
<td width="50" align="center"><strong>Cantidad</strong></td>
<td width="100" align="center"><strong>Tarifa</strong></td>
<td width="100" align="center"><strong>Total</strong></td>
<td width="50"> </td>
</tr>
<tbody id="tabla">
</tbody>
</table>
<input type='hidden' value='0' name="contador" id='contador'>
<input class="boton" name="insertar" type="submit" id="insertar" value="Guardar..." />
</form>
</body>
</html>