CODEWITHSUNDEEP
htmlcss
milmal
milmal

Reputation: 551

How to set child to 100% width of context when parent has a fixed width in table?

I have <table> with expandable content. What I want to achieve is for the table in the expanded content to take up 100% of the width of the parent table. Is that possible?

The purpose of displaying the expanded content as a part of the cell is for the tabbing to be displayed in the correct order.

Here is a Codesandbox to reproduce the table.

enter image description here

Upvotes: 0

Views: 105

Answers (1)

ciekals11
ciekals11

Reputation: 2155

Most likely you will have to create another tr after this that will be shown on button click. In your current html this will not be possible.
I mean it is achievable but with absolute positioning that will be a pain to implement.

try something like this

<table border="1">
  <tr>
    <td> <button>Button that will trigger showOnClick-1 to show</button> </td>
    <td>sth</td>
    <td>sth</td>
  </tr>
  <tr id="showOnClick-1">
    <td colspan="3">asd</td>
  </tr>
</table>

EDIT

You can create custom element that will work like table but will be more, let's say customizable. In this example i have used `grid` that allows me to place them shape that you need and will maintain tabbing order. 

.custom-table {
    max-width: 500px;
}

.item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}

.item-cell {
    padding: 10px;
    border: 1px solid #000000;
}

.full-w {
    grid-column-start: 1;
    grid-column-end: 4;
}

.order-1 {order: 1;}
.order-2 {order: 2;}
.order-3 {order: 3;}
.order-4 {order: 4;}
<div class="custom-table">
    <div class="item">
        <div class="item-cell order-1">
            <button>1</button>
        </div>
        <div class="item-cell order-2">sth</div>
        <div class="item-cell order-4 full-w">
            <button>2</button>
        </div>
        <div class="item-cell order-3">
            <button>3</button>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions