0

I have a nested table which should take up the entire width of the cell in which it is expanding. Currently, it is leaving some margins which I have tried to reduce but what I did is not working. I have tried other solutions previously answered to similar questions but nothing is working.

$(function(){ $(".fold-table tr.view").on("click", function(){ $(this).toggleClass("open").next(".fold").toggleClass("open"); }); });
.table{ font-size:12px; width: 50%; border-collapse: separate; border-spacing: 0 2px; } table thead th{ border-bottom: 0px; } table td,th{ border-top: 0px; } th{ background-color:#FFFF } .main tr:nth-child(odd){ background-color: #F8F8F8 } .tbody tr:nth-child(even){ background-color:#F8F8F8 } table.fold-table > tbody > tr.view td, table.fold-table > tbody > tr.view th { cursor: pointer; } table.fold-table > tbody > tr.view:hover { background: #ddd; } table.fold-table > tbody > tr.view.open { background: #ddd; } table.fold-table > tbody > tr.fold { display: none; } table.fold-table > tbody > tr.fold.open { display: table-row; } .span{ width: 100% !important; } .fold-content > table { width: 100%; } table.fold-content > tr{ background-color:#ddd !important; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" /> <table class="table fold-table" id="table"> <thead> <tr> <th scope="col">Name</th> <th scope="col">Email</th> <th scope="col">Contact Details</th> </tr> </thead> <tbody> <tr class="view main"> <td >John</td> <td >[email protected]</td> <td >35373726</td> </tr> <tr class="fold"> <td colspan="3 span"> <div class="fold-content"> <table> <tbody> <tr class="view"> <td >John</td> <td >[email protected]</td> <td >35373726</td> </tr> <tr class="view"> <td >John</td> <td >[email protected]</td> <td >35373726</td> </tr> <tr class="view"> <td >John</td> <td >[email protected]</td> <td >35373726</td> </tr> </tbody> </table> </div> </td> </tr> <tr> <td >John</td> <td >[email protected]</td> <td >35373726</td> </tr> <tr> <td >John</td> <td >[email protected]</td> <td >35373726</td> </tr> <tr> <td >John</td> <td >[email protected]</td> <td >35373726</td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="table.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Please suggest how I can deal with this scenario.

Thanks as always !

Improve this question
2
  • Are you saying the nested table is leaving margins ? Are you able to screenshot it and paste it with current and desired output ? padding: 0.75em is by default. if thats what you are taking about! Commented Aug 25, 2020 at 7:36
  • add a css for solve this 'width issue' tr.fold.open > td { padding: 0; } Commented Aug 25, 2020 at 7:47

2 Answers 2

Reset to default
2

Adding the following rule (verbose as it is) solved the problem.

table.fold-table > tbody > tr.fold.open > td { padding: 0; }

When inspecting that td, you can see the padding applied to it (.75rem, or 12px of space on the left and right of the element).

enter image description here

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I tried this actually. But it only removes the padding from left side. Even adding padding-right:0 does nothing.
@HarshVardhanBandta I'm looking at it in the editor right now and there is no right padding at all.
Ah ! it is solved now. It was receiving width from the parent element ! I changed that. It is fixed now. Thanks :D
If Andy's answer solved your issue, why don't you accept it as a correct answer?
@HarshVardhanBandta I would appreciate it if you would accept my answer.
2

I believe this is due to .table td having a .75rem padding which when nested gives the child table an additional .75rem padding.

You could reduce the inner table's td padding to zero like this

<tr class="fold"> <td style="padding: 0" colspan="3 span"> <div class="fold-content"> <table> <tbody> <tr class="view"> <td >John</td> <td >[email protected]</td> <td >35373726</td> </tr> <tr class="view"> <td >John</td> <td >[email protected]</td> <td >35373726</td> </tr> <tr class="view"> <td >John</td> <td >[email protected]</td> <td >35373726</td> </tr> </tbody> </table> </div> </td> </tr>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.