Question

我正在尝试将两个div的位置设置为表格单元格的顶部和底部，以便可以选择它们来调整大小。但是，我的应用程序的一部分涉及用户跨越表的行（如代码段中所示）。是否可以分别动态地将resize div（north＆amp; south）的位置设置为表格单元格的顶部和底部？这样，当用户跨越表的行时，调整大小的div将随边框一起移动。

可以使用.offset（）或.position（）来完成吗？我不确定哪种方法是正确的。我不认为这可以单独用CSS完成。但如果有人能证明我的错，我愿意接受建议。

$('.appt-text').before("<div class='resize-north'></div>");
$('.appt-text').after("<div class='resize-south'></div>");
$('td').attr("align", "center");

$('.resize-south').on('mouseover', function() {
  $(this).css('cursor', 's-resize');
});

$('.resize-north').on('mouseover', function() {
  $(this).css('cursor', 'n-resize');
});

.resize-north {
  border: 2px solid black;
  position: relative; 
  display: inline-block;
  vertical-align: top;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 1px;
  z-index: 1000;
}

.resize-south {
  border: 2px solid black;
  position: relative; 
  display: inline-block;
  vertical-align: bottom;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 1px;
  z-index: 1000;
}

/* CSS code from here down is just for visualization */

.appt-text {
  width: 100%;
  max-width: 100px;
  display: table-cell;
  padding: 10px;
  vertical-align: middle;
  text-align: center;
  white-space: pre-wrap;
  word-wrap: break-word;
}

td {
  height: 100%;
  width: 100px;
  max-width: 100px;
  max-height: 100px;
  margin: 0;
  padding: 0;
}

td div {
  max-width: 150px;
  outline: none;
}

table {
  border-collapse: separate !important;
  border-top: 2px solid #4DC7E8;
  border-left: 2px solid #4DC7E8;
  margin: 0 auto;
}

tr td, th {
  border-right: 2px solid #4DC7E8;
  border-bottom: 2px solid #4DC7E8;
}

th {
  width: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
          <thead>
            <tr class="days-of-the-week">
              <th scope="col"></th>
              <th scope="col">A</th>
              <th scope="col">B</th>
              <th scope="col">C</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row" class="rowHdr">1</th>
              <td class="cell" rowspan="2"><div contenteditable="true" class="appt-text"></div></td>
              <td class="cell"><div contenteditable="true" class="appt-text"></div></td>
              <td class="cell"><div contenteditable="true" class="appt-text"></div></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">2</th>
              <td class="cell"><div contenteditable="true" class="appt-text"></div></td>
              <td class="cell"><div contenteditable="true" class="appt-text"></div></td>
            </tr>
</table>

Answer 1

您可能希望使用position: absolute和top: 0px;或bottom: 0px;。只要包含元素也是定位元素，它们就应该起作用。

您可以通过将parent / container / ancestor元素设置为position: relative来实现。它不会改变相对于之前的位置本身，但它现在被视为可以定位position: absolute元素的定位元素。

下面是稍加修改的CSS，并进行了这些更改。它应该让你更接近你描述的内容。

.resize-north {
  border: 2px solid black;
  position: absolute;  /*<--*/
  display: inline-block;
  top: 0px; /*<--*/
  padding: 0;
  margin: 0;
  width: 100%;
  height: 1px;
  z-index: 1000;
}

.resize-south {
  border: 2px solid black;
  position: absolute; /*<--*/
  display: inline-block;
  bottom: 0px; /*<--*/
  padding: 0;
  margin: 0;
  width: 100%;
  height: 1px;
  z-index: 1000;
}


/* CSS code from here down is just for visualization */

.appt-text {
  width: 100%;
  max-width: 100px;
  display: table-cell;
  padding: 10px;
  vertical-align: middle;
  text-align: center;
  white-space: pre-wrap;
  word-wrap: break-word;
  position: relative; /*<--*/
}

td {
  height: 100%;
  width: 100px;
  max-width: 100px;
  max-height: 100px;
  margin: 0;
  padding: 0;
  position: relative; /*<--*/
}

td div {
  max-width: 150px;
  outline: none;
  position: relative; /*<--*/
}

table {
  border-collapse: separate !important;
  border-top: 2px solid #4DC7E8;
  border-left: 2px solid #4DC7E8;
  margin: 0 auto;
  position: relative; /*<--*/
}

tr td,
th {
  border-right: 2px solid #4DC7E8;
  border-bottom: 2px solid #4DC7E8;
}

th {
  width: 80px;
}

希望这有助于或者至少推动你朝着正确的方向发展......你可能也希望调查flexbox，尽管你可能已经排除了这一点。

如何使用.offset（）或.position（）

1 个答案: