如何防止这些表重叠？

时间：2017-08-29 09:48:43

标签： html css

有没有办法防止左侧桌子在悬停在桌子上时撞到桌子的右侧？

.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>

当我将浏览器最小化到最小时，如何防止表相互冲突。

3 个答案:

答案 0 :(得分：2)

您可以使用Install-Package EntityFramework 设置两个表格。查看下面的更新代码段。

float
.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;
}

答案 1 :(得分：2)

你可以将除法单元格绝对设置为相对的td，这样表格数据在聚焦和悬停时不会波动。

.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>

答案 2 :(得分：2)

我刚刚更改了.rightdrop和.leftdrop css类。

.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>

相关问题
最新问题