I've been working with bootstrap and I managed to customize the accordion to fit into a table format. Everything is working perfectly except for a small issue with the icon displaying a border-bottom when toggled open. I've tried troubleshooting, but I can't seem to figure out where this border is coming from.
The problem can be seen here: https://i.sstatic.net/3TSkN.png
However, when the table is collapsed, it looks fine: https://i.sstatic.net/VuZ3h.png
Below is the code for the table:
<!-- language: lang-css -->
.accordion-line-button {
padding: 0;
width: auto;
border: none;
}
<!-- language: lang-html -->
<table class="accordion" id="accordionExample">
<tr class="accordion-item">
<td class="accordion-header" id="heading1">
<button class="accordion-button accordion-line-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1"></button>
</td>
<td class="accord">
Question
</td>
</tr>
<tr>
<td colspan="2" class="accordion-collapse collapse" id="collapse1" aria-labelledby="heading1" data-bs-parent="#accordionExample">
<div class="accordion-body">Answer
</div>
</td>
</tr>
</table>
You can also view a live demo here. I suspect the issue lies within the template I'm using, but I haven't been able to pinpoint the exact cause.
Thanks in advance for any assistance!