Q&A
.style.display = 'table' にするか 'inline-table'
テーブルの表示幅についてですが、display:noneとしておいて、javascriptでdisplay:blockに切り替えると意図したとおりになりません。
（id="menu_〇"のテーブルも幅100%表示にしたいのです）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>TEST</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="robots" content="noindex,nofollow" > </head> <script> function menu_1(){ document.getElementById("menu_1").style.display="block"; document.getElementById("menu_2").style.display="none"; document.getElementById("menu_3").style.display="none"; document.getElementById("menu_4").style.display="none"; } function menu_2(){ document.getElementById("menu_1").style.display="none"; document.getElementById("menu_2").style.display="block"; document.getElementById("menu_3").style.display="none"; document.getElementById("menu_4").style.display="none"; } function menu_3(){ document.getElementById("menu_1").style.display="none"; document.getElementById("menu_2").style.display="none"; document.getElementById("menu_3").style.display="block"; document.getElementById("menu_4").style.display="none"; } function menu_4(){ document.getElementById("menu_1").style.display="none"; document.getElementById("menu_2").style.display="none"; document.getElementById("menu_3").style.display="none"; document.getElementById("menu_4").style.display="block"; } </script> <body style="background-color:#000000"> <h1 style="color:white">Menu</h1> <table style="width:100%;height:180px"> <caption style="background-color:white;border:1px solid blue;border-radius:15px;">：：：選択して下さい：：：</caption> <tbody> <tr> <td style="width:25%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="menu_1()">選択1</button> </td> <td style="width:25%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="menu_2()">選択2</button> </td> <td style="width:25%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="menu_3()">選択3</button> </td> <td style="width:25%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="menu_4()">選択4</button> </td> </tr> </tbody> </table> <table style="width:100%;height:180px;display:none" id="menu_1"> <tbody> <tr> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択1-1</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択1-2</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択1-3</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択1-4</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択1-5</button> </td> </tr> </tbody> </table> <table style="width:100%;height:180px;display:none" id="menu_2"> <tbody> <tr> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択2-1</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択2-2</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択2-3</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択2-4</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択2-5</button> </td> </tr> </tbody> </table> <table style="width:100%;height:180px;display:none" id="menu_3"> <tbody> <tr> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択3-1</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択3-2</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択3-3</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択3-4</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択3-5</button> </td> </tr> </tbody> </table> <table style="width:100%;height:180px;display:none" id="menu_4"> <tbody> <tr> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択4-1</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択4-2</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択4-3</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択4-4</button> </td> <td style="width:20%;text-align:center"> <button style="width:90%;height:120px;font-size:xx-large;background-color:#a3ffd1;border:3px solid white;border-radius:15px" type="button" onClick="location.href=''">選択4-5</button> </td> </tr> </tbody> </table> </body> </html>
表示非表示の切り替えをやめ、最初から全て表示状態（menu_〇のdisplay:noneをやめる）にすると、意図したとおり幅100%になるのですが・・・。
これは、「そういうもの」と諦めるものなのか、それとも何か間違っているのでしょうか？
自己解決
