Question

我的表格附加了一个span元素，它延伸了许多表格分隔符（其编号是我代码中的变量）。

如果此跨度溢出我的表格边框之外，我希望将跨度的其余部分附加到下一个表格行，而不是扩展到表格之外。

为简单起见，我将跨度附加到单个单元格中。在代码中，这是可变的。我想要的东西比计算表格中单元格的位置更简单，然后计算剩余的宽度blahblahblah ......

＆＃13;

$( document ).ready(function() {
  var $element = $('td#append');
  //7 will be a random number
  var length = 7*$element.width();  
  append_span = $element.append('</br><span style="width: '+length+'px"></span>');
});

＆＃13;

table {
	border:1px solid navy;
	width: 70%;
	text-align: center;
}
table td {
	width: 100px;
	height: 100px;
	vertical-align: top;
	text-align: right;
	border: 1px solid #c6c6ec;
	position: relative;
  left: 0;
  position: relative;
}
span {
  display: inline-block;
  width: 300px;
  height: 30px;
  background-color: blue;
  z-index: 1;
  position:absolute; 
  border: solid black 1px;
}
div {
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>
  <table>
    <tr>
      <td></td>
      <td id="append"></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

＆＃13;

如何检测跨度是否溢出表格 （我不想使用div，这给我的结果不正确）
如何将剩余范围移至下一行......依此类推？

使表溢出附加到jQuery中的下一个表行

0 个答案: