javascript - 表格宽度：100% 调整窗口大小

Question

我有一张桌子，上面有学生的姓名和每日课程。如果我双击一个学生，一个编辑器就会打开，我可以在其中添加详细的规范。一切都很好，但这个编辑器女巫基本上是一张只有一行的表格，不适应窗口大小。编辑器在一个 div 内，这个 div 适应窗口大小，但表格不适应。

这是HTML代码

<main>
            <div id="home">
                <h2 id="date"></h2>
                <table id="table">
                 //this is the table with all the students
                </table>

            <div id="dropdown" class="dropdown">

                    <select id="select">
                      <option value="Nothing">Nichts ausgewählt</option>
                      <option value="Extern">Extern</option>
                      <option value="Termin">Termin</option>
                      <option value="Schule">Schule</option>
                    </select>   

            </div>

            <div id="legend" class="legend">
                    <svg width="10" height="10">
                    <rect x="0" y="0" width="10" height="10" style="fill:#D3D3D3;" />
                    </svg>
                    <a>Extern</a>
                    <br>
                    <svg width="10" height="10">
                    <rect x="0" y="0" width="10" height="10" style="fill:#FFAEB9;" />
                    </svg>
                    <a>Termin</a>
                    <br>
                    <svg width="10" height="10">
                    <rect x="0" y="0" width="10" height="10" style="fill:#FFFF00;" />
                    </svg>
                    <a>Schule</a>
                    <br>
                    <svg width="10" height="10">
                    <rect x="0" y="0" width="10" height="10" style="fill:#00FF00;" />
                    </svg>
                    <a>Visiert</a>
                    <br>
                    <button id="edit">Editieren</button>
            </div>
            <div id="editor">
                //here i add the editor-table with one row
            </div>
    <button id="reset">Zurücksetzen</button>    
    </div>
</main>

添加编辑器的 JS-Function：

function openEditor(row){
                var div = document.getElementById('editor');
                var editor = document.createElement('table');
                var student = document.createElement('tr');
                var header = createHeader(["Name","Status","Fahlführer","Begl. Lehrperson","Instr.","Austritt"]);
                editor.classList.add('editor');                 
                for( var i = 0; i < 7; i++){
                    var cell = document.createElement('td');
                    if(i == 0){
                        var name = document.createElement('label');
                        console.log(row);
                        console.log(row.cells[0]);
                        name.innerHTML= row.cells[0].childNodes[0].value;
                        cell.appendChild(name);
                    }else if(i == 5){
                        var austritt = document.createElement('input');
                        austritt.type = 'date';
                        cell.appendChild(austritt);

                    }else if(i== 6){
                        var button = document.createElement('button');
                        button.innerHTML= "Speichern";
                        button.onclick = function(){safe();};
                        cell.appendChild(button);

                    }else{
                        var input = document.createElement('input');
                        cell.appendChild(input);
                    }
                student.appendChild(cell);  
                }
            editor.appendChild(header);
            editor.appendChild(student);
            div.appendChild(editor);

            }

和整个CSS：

html, body{
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
h3{
    margin-right:50%;
}
table{
    width:100%;
}
*{
    margin: 0;
    padding: 0;
    font-family: monospace;
    box-sizing: border-box;
}

#container{
    position:absolute;
    margin: 4% 4% 4% 4%;
    padding: 2%;
    width: 90%;
    height: 90%;
    background-color: #fff;
}
ul {
    width:100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #006975;
}

li {
  width:25%;
  float: left;
}
h1{
    text-align:center;
}
input{
    font: 18px Helvetica, Arial, sans-serif;
}

li a {
  display: block;
  color: white;
  font-size: 120%;
  text-align: center;
  padding: 14px 16px;
  border-left: 2px solid #fff;
   border-right: 2px solid #fff;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    color: #006975;
    background-color: #fff;
}


#links{
    width:66%;
    float:left;
}
#rechts{
    width:33%;
    float:right;
}
#last{
    float:right;
}

main{
    height: 100%;
    width: 100%;
}
body{
    background-color: #006975;
    overflow-y:hidden;
}

 #reset{
    float:right;
    margin-top:7%;
    font-size: 120%;
    height:10%;
    width: 45%;
    color: #fff;
    background-color:#006975;

 }

#view{
        position:relative;
        height:75%;
}

button:hover{

    color:#fff;
    background-color:#84afb8;
}

#home{
    height:75%;
}

#dropdown{
    width:100%;
    visibility:hidden;
}
//the following styles the editor-table
table.editor{
    width:100%;
    border: 2px solid black;
    padding: 5px 5px 5px 5px;
    margin-top: 1%;
}
table.editor td{
    width:14%;
}
table.editor th{
    text-align: left;
    width:14%;

}

label{
    font: 18px Helvetica, Arial, sans-serif;
}
.cell {
    width: 10%;
    text-align: center;
    background-color: #D3D3D3;
}

.cell.on {
    width: 10%;
    background-color: #00FF00;
}
.cell.les {
    width: 10%;
    background-color: #FFFF00;
    }

    .cell.term {
        width: 10%;
        background-color: #FFAEB9;
    }
    .cell.ext{
        width: 10%;
        background-color: #D3D3D3;
    }

.cell.spacer {
    width: 10%;
    background-color:white;
}
input.name {
    width: 90%;
}
input.selected{
    background-color: red;
}

更多代码请询问

编辑：

全尺寸窗口

不是全尺寸的窗口

标签： javascripthtmlcss