Question 302751 in Html Question posted in
Some basic documentation can be found here.

Table HTML – transform 2 rows in half height 1 standard row

I’m trying to replicate the middle columns and rows in between, having 50% the height of the standard row height, to look like the image below:

screenshot html table example

I am trying to nest them and adjust but it’s not working as it should, they don’t respond as in the picture, with the middle column with two rows: 1 above 100% wide and two columns below, they all span side by side, and trying to adjust width is not working either (both rows will share the full height being 50% each, of the main row).

Can someone help with how would be the best to solve this part?

<tr>
    <td>I FALTET NEDAN FÅR ANTECKNINGAR INTE GÖRAS...</td>
        <td>
           <p>Belopp (får inte ändras)</p>
        <td>
           <p>Svenska kronor</p>
        </td>
        <td>
           <p>öre</p>
        </td>
    </td>
    <td colspan="3">I FALTET NEDAN FÅR ANTECKNINGAR INTE GÖRAS..</td>
</tr>

I am trying to nest them and setting up the width with css but it’s not working.

Tags:

2

Answers


  1. 0

    There are several ways to achieve that.. anyway one approach could be to model the middle col as a new table, since you cannot nest td elements. The other could be having one single table.

    Nested tables:

    * {
  border-collapse: collapse;
}

table td {
  border: solid 1px;
}
    <table>
  <tr>
    <td>I FALTET NEDAN FÅR ANTECKNINGAR INTE GÖRAS...</td>
    <td>
      <table>
        <tr>
          <td colspan="2" style="text-align: center;">Belopp (får inte ändras)</td>
        </tr>
        <tr>
          <td>Svenska kronor</td>
          <td>öre</td>
        </tr>
      </table>
    </td>  
    <td>I FALTET NEDAN FÅR ANTECKNINGAR INTE GÖRAS..</td>
  </tr>
</table>

    Single table:

    table td{
  border: solid;
}
    <table>
  <tr>
    <td rowspan="2">I FÄLTET NEDAN FÅR ANTECKNINGAR INTE GÖRAS...</td>
    <td colspan="2" style="text-align: center;">Belopp (får inte ändras)</td>
    <td rowspan="2">I FÄLTET NEDAN FÅR ANTECKNINGAR INTE GÖRAS...</td>
  </tr>
  <tr>
    <td>Svenska kronor</td>
    <td>öre</td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    You need to managed like this

    .borderd td{
  padding:10px;
  border:1px solid #000;
}
.p-0{
  padding:0px !important;
}
table {
    border-collapse: collapse;
}
    <table class="borderd" cellspacing="0" cellpadding="0">
<tbody>
<tr>
    <td>I FALTET NEDAN FÅR ANTECKNINGAR INTE GÖRAS...</td>
    <td class="p-0" >
        <table class="borderd" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                <td colspan="2">
                  <p>Belopp (får inte ändras)</p>
                </td>
              </tr>
              <tr>
                <td>
                   <p>Svenska kronor</p>
                </td>
                <td>
                   <p>öre</p>
                </td>
              </tr>
          </tbody>
        </table>
    </td>
    <td>I FALTET NEDAN FÅR ANTECKNINGAR INTE GÖRAS..</td>
</tr>
</tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search