DIV внутри ТД с междурядьем - PullRequest
Новая
       1

DIV внутри ТД с междурядьем

0 голосов
/ 04 марта 2020

Мой вопрос может быть глупым, но мне нужно спросить.

Можно ли разместить <div> внутри <td>, который <span> несколько строк, без установки <td> s rowspan atTribute? Я знаю, <div> не имеет атрибута rowspan.

Как: 

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

Кодовое обозначение:

Code appearence

Ответы [ 2 ]

1 голос
/ 04 марта 2020

Если мы учтем тот факт, что у вас будет такая же высота для ваших ячеек, вы можете сделать это, полагаясь на свойство высоты: 

td {
  border: 1px #ddd solid;
  text-align: center;
  padding: 10px 20px;
  position:relative;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

.item {
  background:red;
}
[class*="row-span"] {
  position:absolute;
  top:0;
  left:0;
  right:0;
}
.row-span-4 {
  height:calc(400% + 3*1px);
}
.row-span-3 {
  height:calc(300% + 2*1px);
}
.row-span-2 {
  height:calc(200% + 1*1px);
}
.row-span-1 {
  height:calc(100% + 0*1px);
}
<table>
  <tr>
    <td></td>
    <td>
      <div class="item row-span-4"></div>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td><div class="item row-span-3"></div></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><div class="item row-span-1"></div></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <table>
1 голос
/ 04 марта 2020

я думаю, что вы не можете сделать это, используя только 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>

Другое решение: Здесь другое решение, которое перекрывает td абсолютным слоем div, который динамически принимает высоту от 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>
...