Bollate

HTML

[ANSWERED] html – DIV inside a TD with rowspan

By

Nov 20, 2022 , ,

Solution 1 :

If we consider the fact that you will have the same height for your cells then you can do this relying on the height property:

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>

Solution 2 :

i think you can’t do that using only html but you can do it by using JavaScript

here an example using 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>

Another Solution : Here another Solution That overlaying the td with absolute layer of div which takes its height dynamically from data-rowspan attribute 

$("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>

Problem :

My question might be silly, but I need to ask.

Is it possible to place a <div> inside a <td> which <span> several rows without setting <td>‘s rowspan atTribute? I know <div> does not have a rowspan attribute.

Like: 

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

Code appareance:

Code appearence

Comments

Comment posted by Abdelrahman Gobarah

why not give

Comment posted by user3021830

There will be too much manipulation within the table. I will add, move, delete so many DIVs and it will bring too much manipulation over table. I am thinking of a safer and a shorter approach. Doing, undoing each and every table cells with so many actions will increase complexity.

Comment posted by Temani Afif

you want the div to overlap the 3 next TD?

Comment posted by gridbyexample.com/examples

CSS grid instead of a table may be an option:

Comment posted by user3021830

Yes, but in a vertical manner.

Comment posted by user3021830

That looks exactly what I need. Thank you very much.

Comment posted by user3021830

You are still manipulating

but over

this time. Not I have expected but makes quite sense. I will try this approach. Thank you.

Comment posted by Temani Afif

@user3021830 I don’t see why doing such thing. Adding an attribute to one element to later put it (using jQuery!) inside another element. It doesn’t make a lot of sense. Simply add the attribute on the td and you will have the same result with a more logical code

Comment posted by Ahmed El-sayed

@TemaniAfif , i think he needs to overlaying the current

By

Related Post

HTML

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022
HTML

[ANSWERED] html – Hidden Div Text Reappears?

Nov 20, 2022
HTML

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022