CODEWITHSUNDEEP
htmlcss
Sparta King
Sparta King

Reputation: 37

How to prevent these tables from overlapping?

Is there any way to prevent the left side table from bumping with the right side of table while hovering on it?

.rightdrop {
  margin: 0;
  padding: 0;
}

.leftdrop {
  margin-top: -50px;
  margin-right: 61px;
  margin-left: -1px;
  margin-bottom: -2px;
  padding: 0;
  float: right;
  position: relative;
}

a {
  display: block;
  border: 1px solid black;
  text-decoration-line: none;
  text-align: center;
}

a:visited {
  color: blue;
}

tr {
  border-collapse: collapse;
}

.cell {
  display: none;
  border: 1px solid black;
}

.cell p {
  text-align: center;
}

.submitButton {
  text-align: center;
}

input {
  margin-left: .5em;
}

.rightdrop a:focus+.cell,
.rightdrop a:hover+.cell,
.leftdrop a:focus+.cell,
.leftdrop a:hover+.cell {
  display: block;
}

.cell:focus,
.cell:hover {
  display: block;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>INTI Reservation System</title>

  <link rel="stylesheet" href="style.css">
</head>

<body>

  <table width="300" class="rightdrop">

    <tr>
      <td>
        <a href="#">C1</a>
        <div class="cell">
          <p><b>Name: </b> </p>
          <p><b>Student ID: </b></p>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <a href="#">C2</a>
        <div class="cell">
          <p><b>Name :</b><input type="text" maxlength="10" placeholder="Enter you name"> </p>
          <p><b>Password :</b><input type="password" maxlength="8" placeholder="Enter you password"></p>
          <div class="submitButton">

            <input type="submit">
          </div>
        </div>
      </td>
    </tr>

  </table>

  <table width="300" class="leftdrop">

    <tr>
      <td>
        <a href="#">C1</a>
        <div class="cell">
          <p><b>Name: </b> </p>
          <p><b>Student ID: </b></p>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <a href="#">C2</a>
        <div class="cell">
          <p><b>Name :</b><input type="text" maxlength="10" placeholder="Enter you name"> </p>
          <p><b>Password :</b><input type="password" maxlength="8" placeholder="Enter you password"></p>
          <div class="submitButton">

            <input type="submit">
          </div>
        </div>
      </td>
    </tr>



  </table>


</body>

</html>

Also how to prevent the tables collide to each other when I minimize the browser to the smallest.

Upvotes: 0

Views: 72

Answers (3)

Suresh M Sidy
Suresh M Sidy

Reputation: 113

I just changed the .rightdrop and .leftdrop css classes.

.rightdrop {
  float: left;
}

.leftdrop {
  float: right;
}

a {
  display: block;
  border: 1px solid black;
  text-decoration-line: none;
  text-align: center;
}

a:visited {
  color: blue;
}

tr {
  border-collapse: collapse;
}

.cell {
  display: none;
  border: 1px solid black;
}

.cell p {
  text-align: center;
}

.submitButton {
  text-align: center;
}

input {
  margin-left: .5em;
}

.rightdrop a:focus+.cell,
.rightdrop a:hover+.cell,
.leftdrop a:focus+.cell,
.leftdrop a:hover+.cell {
  display: block;
}

.cell:focus,
.cell:hover {
  display: block;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>INTI Reservation System</title>

  <link rel="stylesheet" href="style.css">
</head>

<body>

  <table width="300" class="rightdrop">

    <tr>
      <td>
        <a href="#">C1</a>
        <div class="cell">
          <p><b>Name: </b> </p>
          <p><b>Student ID: </b></p>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <a href="#">C2</a>
        <div class="cell">
          <p><b>Name :</b><input type="text" maxlength="10" placeholder="Enter you name"> </p>
          <p><b>Password :</b><input type="password" maxlength="8" placeholder="Enter you password"></p>
          <div class="submitButton">

            <input type="submit">
          </div>
        </div>
      </td>
    </tr>

  </table>

  <table width="300" class="leftdrop">

    <tr>
      <td>
        <a href="#">C1</a>
        <div class="cell">
          <p><b>Name: </b> </p>
          <p><b>Student ID: </b></p>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <a href="#">C2</a>
        <div class="cell">
          <p><b>Name :</b><input type="text" maxlength="10" placeholder="Enter you name"> </p>
          <p><b>Password :</b><input type="password" maxlength="8" placeholder="Enter you password"></p>
          <div class="submitButton">

            <input type="submit">
          </div>
        </div>
      </td>
    </tr>



  </table>


</body>

</html>

Upvotes: 2

Anmol Sandal
Anmol Sandal

Reputation: 1488

You can make the division cell absolute to the td which will be relative, so that table data doesn't fluctuate when focused and hovered.

.rightdrop {
  margin: 0;
  padding: 0;
}

.leftdrop {
  margin-top: -50px;
  margin-right: 61px;
  margin-left: -1px;
  margin-bottom: -2px;
  padding: 0;
  float: right;
  position: relative;
}
.leftdrop td, .rightdrop td {  
  position: relative;
}
a {
  display: block;
  border: 1px solid black;
  text-decoration-line: none;
  text-align: center;
}

a:visited {
  color: blue;
}

tr {
  border-collapse: collapse;
}

.cell {
  display: none;
  border: 1px solid black;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  z-index: 1;
}

.cell p {
  text-align: center;
}

.submitButton {
  text-align: center;
}

input {
  margin-left: .5em;
}

.rightdrop a:focus+.cell,
.rightdrop a:hover+.cell,
.leftdrop a:focus+.cell,
.leftdrop a:hover+.cell {
  display: block;
}

.cell:focus,
.cell:hover {
  display: block;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>INTI Reservation System</title>

  <link rel="stylesheet" href="style.css">
</head>

<body>

  <table width="300" class="rightdrop">

    <tr>
      <td>
        <a href="#">C1</a>
        <div class="cell">
          <p><b>Name: </b> </p>
          <p><b>Student ID: </b></p>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <a href="#">C2</a>
        <div class="cell">
          <p><b>Name :</b><input type="text" maxlength="10" placeholder="Enter you name"> </p>
          <p><b>Password :</b><input type="password" maxlength="8" placeholder="Enter you password"></p>
          <div class="submitButton">

            <input type="submit">
          </div>
        </div>
      </td>
    </tr>

  </table>

  <table width="300" class="leftdrop">

    <tr>
      <td>
        <a href="#">C1</a>
        <div class="cell">
          <p><b>Name: </b> </p>
          <p><b>Student ID: </b></p>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <a href="#">C2</a>
        <div class="cell">
          <p><b>Name :</b><input type="text" maxlength="10" placeholder="Enter you name"> </p>
          <p><b>Password :</b><input type="password" maxlength="8" placeholder="Enter you password"></p>
          <div class="submitButton">

            <input type="submit">
          </div>
        </div>
      </td>
    </tr>



  </table>


</body>

</html>

Upvotes: 2

Super User
Super User

Reputation: 9642

You can set both tables using float. Check updated snippet below..

.rightdrop {
  margin: 0;
  padding: 0;
  float: right;
  width: 50%;
}

.leftdrop {
  padding: 0;
  float: left;
  position: relative;
  width: 50%;
}

a {
  display: block;
  border: 1px solid black;
  text-decoration-line: none;
  text-align: center;
}

a:visited {
  color: blue;
}

tr {
  border-collapse: collapse;
}
.cell {
  display: none;
  border: 1px solid black;
}

.cell p {
  text-align: center;
}

.submitButton {
  text-align: center;
}

input {
  margin-left: .5em;
}

.rightdrop a:focus+.cell,
.rightdrop a:hover+.cell,
.leftdrop a:focus+.cell,
.leftdrop a:hover+.cell {
  display: block;
}

.cell:focus,
.cell:hover {
  display: block;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>INTI Reservation System</title>

  <link rel="stylesheet" href="style.css">
</head>

<body>

  <table width="300" class="rightdrop">

    <tr>
      <td>
        <a href="#">C1</a>
        <div class="cell">
          <p><b>Name: </b> </p>
          <p><b>Student ID: </b></p>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <a href="#">C2</a>
        <div class="cell">
          <p><b>Name :</b><input type="text" maxlength="10" placeholder="Enter you name"> </p>
          <p><b>Password :</b><input type="password" maxlength="8" placeholder="Enter you password"></p>
          <div class="submitButton">

            <input type="submit">
          </div>
        </div>
      </td>
    </tr>

  </table>

  <table width="300" class="leftdrop">

    <tr>
      <td>
        <a href="#">C1</a>
        <div class="cell">
          <p><b>Name: </b> </p>
          <p><b>Student ID: </b></p>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <a href="#">C2</a>
        <div class="cell">
          <p><b>Name :</b><input type="text" maxlength="10" placeholder="Enter you name"> </p>
          <p><b>Password :</b><input type="password" maxlength="8" placeholder="Enter you password"></p>
          <div class="submitButton">

            <input type="submit">
          </div>
        </div>
      </td>
    </tr>



  </table>


</body>

</html>

Upvotes: 2

Related Questions