Estoy escribiendo un programa simple que incluye tablas y td. En el programa al pulsar q aparece el número uno en una td. pero cuando sucede, el ancho td cambia repentinamente. así que mi pregunta es ¿cómo detenerlo? aquí está el código:
<html> <body> <table border = "1"> <tr> <td id = "td1"></td> <td id = "td2"></td> </tr> </table> <style> table { height: 400px; width: 800px; margin-left: auto; margin-right: auto; text-align: center; font-size:25px; } </style> </head> <head> <script> document.addEventListener("keydown", function(e){ if (e.key == "q") { document.getElementById("td1").innerHTML = "1"; } }); </script> </head> </html>puede agregar la siguiente propiedad a su definición css
table-layout: fixed; <html> <body> <table border = "1"> <tr> <td id = "td1"></td> <td id = "td2"></td> </tr> </table> <style> table { height: 400px; width: 800px; margin-left: auto; margin-right: auto; text-align: center; font-size:25px; table-layout: fixed; } </style> </head> <head> <script> document.addEventListener("keydown", function(e){ if (e.key == "q") { document.getElementById("td1").innerHTML = "1"; } }); </script> </head> <html> <head> <table border = "1"> <tr> <td id = "td1"></td> <td id = "td2"></td> </tr> </table> <style> table { height: 400px; width: 800px; margin-left: auto; margin-right: auto; text-align: center; font-size:25px; } td { width: 50%; } </style> </head> <body> <script> document.addEventListener("keydown", function(e){ if (e.key == "q") { document.getElementById("td1").innerHTML = "1"; } }); </script> </body> </html>usa este código