Need help in designing the table
I created the table having 5 column, so on last column I have button, when I click on button the div should display and cover the whole row. The problem I am facing is, the div is only showed in the current 5 column, I want the div cover the whole row (tr)
Design I want to achieve in pic;
18 Replies
code:
you're much more likely to find someone who is willing to help if you include a live demo, or at the very very least your code in a codeblock instead of just posting a screenshot
check out #How To Ask Good Questions
ok
sorry for that
I don't know Tailwind so I don't know exactly what
top-12 means, but I think it should be 0, same with left and right if you want it to cover the entire row
No code to play around with makes it difficult to diagnose, so that's all I've got
Just copying the HTML that is produced and the resources required to make it display as you see it is all that's really required, don't need to set up everythinghttps://codesandbox.io/s/clever-christian-7unckn?file=/src/App.js
Sorry. Now here is the link of sandbox
well top is basically css property and 12 (3rem)
sorry for incomplete info. Sandbox link attached
It looks like when you click the Log button it opens the modal in the first row, not the model on the row that was clicked
Yes. I dont want model. that was just for understanding. basically I want, when the log is clicked, the div display below and cover full width
I am confused how to achieve it
I changed
top-4 to top-0 and I get what I think you're describing, it completely covers the rowWrite now the model way is not working , basically the content should expand and collapse
write now the model is stacked over the rows
I want like this
I think its not possible with table I have to used div. May be I am wrong
Ah I see, hmm. It's possible but I don't know how elegant it can be achieved
I need a quick reminder on tables because I've just been using CSS Grid for everything tables
I tried with table but the sapce it covers only last column width. Full is bit tricky
I think I have to do the same for this as well
Add a new row under the row you want to see the logs for and then have a
<td colspan="5"> with the modal inside https://codepen.io/z-/pen/abRVVWg/8129731db56e7c610ae5aa58e3ecaab3I see that you have column sorting, you may want to hide all modals when you click one
Actually no it should work if it's tied to the original row
Thanks this works.
