占据整个屏幕宽度的表格

Question

我正在使用 Javascript,HTML,CSS 构建一个名为Tennis Club Management的示例项目。 在这个项目中，我登录了 html 页面和managePlayer html 页面。 在manageplayer.html中，我有两个按钮，即Add Players和Show Players 。 点击添加玩家按钮，然后我想显示注册玩家的表格。 问题是创建表单时，在页面加载时自动创建的侧边栏（已创建单独的文件sidebar.js ）在表单出现时降低，因为表单正在全宽

下面是截图和代码文件

index.js

// --------------TESTING CODE FOR LOGIN PAGE LOGIN BUTTON CLICK----------------

var istableCreated = false;
var email, password;
document.querySelector(".loginbtn").addEventListener("click", (e) => {
    email = document.querySelector(".email").value;
    password = document.querySelector(".password").value;

    document.querySelector(".labelemailerror").innerHTML = "";
    document.querySelector(".labelpassworderror").innerHTML = "";

    // ------------TESTING CODE FOR CHECKING VALIDATION AND PRINTING ERROR ON LABELS IF ANY-------------

    if (email === "admin@wimbledon.com" && password === "rogerfederer") {
        console.log("Login successfull....");
        window.open("profile.html");
    }
    else if (email === "" && password === "") {

        document.querySelector(".labelpassworderror").innerHTML = "Email and Password cannot be blank"
    }
    else if (email === "") {

        document.querySelector(".labelemailerror").innerHTML = "Email cannot be blank";
    }
    else if (password === "") {

        document.querySelector(".labelpassworderror").innerHTML = "Password cannot be blank"
    }
    else {

        document.querySelector(".labelpassworderror").innerHTML = "Invalid Email or Password";
    }

    console.log(email, password);
    e.preventDefault();
});





//------------------------------------MANAGE PLAYERS PAGE----------------------------------

    //--------------------------------TESTING CODE FOR SHOWING PLAYERS OF MANAGE PLAYERS PAGE--------------------------
function showplayers() {
    
    if(istableCreated==false){

    
        istableCreated = true;
        console.log(istableCreated);

        //----------TESTING CODE FOR CREATING WRAPPER FOR BOOTSTRAP TABLE FOR RESPONSIVENESS--------

        var myDiv = document.createElement("div");
        myDiv.className = "table-responsive";
        myDiv.id="table-responsive";
        document.body.appendChild(myDiv);     

        //-----------TESTING CODE FOR CREATING BOOTSTRAP DYNAMIC TABLE USING JAVASCRIPT-------------

        var myTable = document.createElement("table");
        myTable.style.marginTop = "2%";
        myTable.className = "table";
        myTable.id="table";
        document.body.appendChild(myDiv).appendChild(myTable);


        var myThead = document.createElement("thead");
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead);

        var myTr = document.createElement("tr");
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr);

        var myThID = document.createElement("th");
        myThID.scope = "col";
        myThID.innerHTML = "ID";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myThID);

        var myThName = document.createElement("th");
        myThName.scope = "col";
        myThName.innerHTML = "Name";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myThName);

        var myThGender = document.createElement("th");

        myThGender.scope = "col";
        myThGender.innerHTML = "Gender";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myThGender);

        var mySubscription = document.createElement("th");
        mySubscription.scope = "col";
        mySubscription.innerHTML = "Subscription";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(mySubscription);

        var myfeeStatus = document.createElement("th");
        myfeeStatus.scope = "col";
        myfeeStatus.innerHTML = "Fee Status";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myfeeStatus);

    }  
    else{
        console.log(istableCreated);
    } 
}

function addplayers() {
    console.log("add players clicked.....")
}

managerPlayers.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manage Players</title>

    <!-- ADDING FONT AWESOME CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- ADDING BOOTSTRAP CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <!-- ADDING STYLE.CSS -->
    <link rel="stylesheet" href="/css/style.css">

</head>

<body>

    <!-- ADDING BUTTONS LIKE SHOW PLAYERS, ADD PLAYERS USING CSS BOOTSTRAP -->
    <button type="button" class="btn btn-secondary showplayers" onclick="showplayers();">Show Players</button>
    <button type="button" class="btn btn-secondary addplayers" onclick="addplayers()">Add Players</button>

    <!-- CREATING REGISTRATION FORM OF CUSTOMER -->
    <form class="customerregistration">
        <div class="container form-div">
            <!-- ADDING ID AND DOB -->
            <div class="row">
                <div class="col">
                    <label>ID :</label>
                    <input type="text">
                </div>

                <div class="col">
                    <label>DOB :</label>
                    <input type="date" id="birthday" name="birthday">
                </div>
            </div>

            <!-- ADDING NAME AND GENDER -->
            <div class="row">
                <div class="col">
                    <label>NAME :</label>
                    <input type="text" placeholder="Enter Name">
                </div>

                <div class="col">
                    <label>GENDER :</label>
                    <input type="radio" name="gender" value="male"> Male
                    <input type="radio" name="gender" value="female"> Female
                </div>
            </div>

            <!-- ADDING CONTACT NUMBER -->

            <div class="row">
                <div class="col">
                    <label>CONTACT :</label>
                </div>

                <div class="col">
                    <input type="text" placeholder="Enter Contact Number">
                </div>

            </div>

            <!-- ADDING ADDRESS -->
            <div class="row">
                <div class="col">
                    <label>ADDRESS :</label>
                </div>
                <div class="col">
                    <textarea class="address" id="address" cols="25" rows="3"></textarea>
                </div>
            </div>

            <!-- ADDING ID PROOF -->

            <div class="row">
                <div class="col">
                    <label>ID PROOF :</label>
                    <select class="idproof" id="idproof">
                        <option value="select">---Select---</option>
                        <option value="license">License</option>
                        <option value="aadhaar">Aadhaar</option>
                        <option value="passport">Passport</option>
                    </select>
                </div>
                <div class="col">
                    <input type="text">
                </div>
            </div>

            <!-- ADDING MEMBERSHIP -->

            <div class="row">
                <div class="col">
                    <label>MEMBERSHIP :</label>
                </div>
                <div class="col">
                    <select class="idproof" id="idproof">
                        <option value="select">---Select---</option>
                        <option value="license">MONTHLY</option>
                        <option value="aadhaar">HALF YEARLY</option>
                        <option value="passport">ANNUALLY</option>
                    </select>
                    <label class="membership-package"></label>
                </div>
            </div>

            <!-- ADDING SAVE BUTTON -->
            <div class="row">
                <button type="submit" class="btn-success">SAVE</button>
            </div>
        </div>
    </form>

    <!-- ADDING BOOTSTRAP JS -->
    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>

    <!-- ADDING INDEX.JS -->
    <script src="/js/sidebar.js"></script>
    <script src="/js/index.js"></script>

</body>

</html>

样式.css

/* ---------------- SETTING CSS PROPERTIES OF PROFILE PAGE AND SIDE BAR---------------- */
body {
  margin: 0;
  font-family: "Lato", sans-serif;
}

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}
 
.sidebar a.active {
  background-color: #4CAF50;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}
.editadminprofile{
  float: right;
}


/* ---------------- SETTING CSS PROPERTIES OF MANAGE PLAYERS PAGE---------------- */

.showplayers{
  margin-right: 30%;
  margin-top: 5%;
  float: right;
  width: 15%;
}

.addplayers{
  margin-right: 3%;
  margin-top: 5%;
  float: right;
  width: 15%;
}


/* ---------------- SETTING CSS PROPERTIES OF TABLE OF MANAGE PLAYER PAGE ---------------- */
table{
  table-layout: fixed;
}

table th, table td { 
  overflow: hidden; 
}
th{
  width: 5%;
}

截屏

请问有什么解决办法吗？

Answer 1

如果你只使用left: 0, top: /* how far you want the sidebar to be from the top of page */使用 position: fixed，这应该可以防止它移动。