时间戳

首页 > 解决方案 > 具有行跨度的 TD 内的 DIV

html - 具有行跨度的 TD 内的 DIV

问题描述

我的问题可能很愚蠢，但我需要问。

是否可以在不设置atTtribute的情况下将 a<div>放置在<td>哪<span>几行中？我知道没有属性。<td>rowspan<div>rowspan

喜欢：

<tbody>
    <tr>
        <td>
            <div class="item row-span-4">
            </div>
        </td>
        <td>
        </td>
    <tr>
</tbody>

代码外观：

代码外观

标签： htmlcsshtml-table

解决方案

我认为你不能只使用 html 来做到这一点，但你可以使用 JavaScript 来做到这一点

这是一个使用 JQuery 的示例：

$("div.row-span").each(function(){
  var rowSpan = $(this).data("rowspan")
  $(this).parents("td").attr("rowspan",rowSpan)
})
td {border:1px #ddd solid;text-align:center;padding:10px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
    <tr>
        <td>1-1</td>
        <td>
          <div class="item row-span" data-rowspan="2">Div</div>
        </td>
        <td>1-2</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
</tbody>
<table>

另一个解决方案：这里是另一个解决方案，它覆盖了div 的绝对层，它从属性td中动态获取其高度data-rowspan

$("div.row-span").each(function(){
  var rowSpan = $(this).data("rowspan")
  //$(this).parents("td").attr("rowspan",rowSpan)
  var divHeight = $(this).parents("td").innerHeight()*rowSpan;
  $(this).height(divHeight)
  
})
td {border:1px #ddd solid;text-align:center;position:relative}
div.row-span {background-color:#ff0000;position:absolute;top:0;z-index:2}
table {border-spacing: 0;border-collapse: collapse;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
      <tr>
          <td>1-1</td>
          <td>1-2</td>
          <td>2-3</td>
      </tr>
      <tr>
          <td>2-1</td>
          <td>
            <div class="item row-span" data-rowspan="2">2-2</div>
          </td>
          <td>2-3</td>
      </tr>
      <tr>
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
      </tr>
      <tr>
          <td>4-1</td>
          <td>4-2</td>
          <td>4-3</td>
      </tr>
  </tbody>
<table>

推荐阅读