I am writing a simple program that includes table and td's.
In the program when you press q the number one appears in a td.
but when it happens the td width suddenly change.
so my question is how to stop it?
here is the code:
<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>you can add the following property to your css definition
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>use this code