I have a table nested inside another table, with a div surrounding it that has the collapse class from Bootstrap. This allows me to collapse it using the button in the first row.
Here are the issues I'm facing:
Is it possible to only display the red border when it is active and make the black one disappear without using JavaScript?
Should I manually adjust the padding so each cell aligns properly, or is there another solution for this?
Would you approach it differently?
I've experimented with different solutions such as changing the position of the div or removing the td, but most of the time, the collapse functionality breaks afterwards.
https://i.sstatic.net/lZfm6.png
table {
width: 800px;
}
tr {
background-color: darkgray;
}
td {
padding:10px;
}
.tr-info {
border-bottom: 1px solid black;
}
.mybutton {
width: 10%;
height: 10%;
font-size: 2px;
}
.hiddenRow {
padding: 0;
}
.hiddenRow th {
border-top: 1px solid red;
}<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your Website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../style.css" media="screen" />
</head>
<body style="background: light-grey;">
<div class="container mt-5">
<div class="row">
<div class="col-12">
<table>
<tbody>
<tr class="tr-info">
<td>
som1
</td>
<td>
some2
</td>
<td>
<button class="mybutton" type="button" data-toggle="collapse" data-target="#dodo" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</td>
</tr>
<tr>
<td colspan="3" class="hiddenRow">
<div class="collapse" id="dodo">
<table>
<thead>
<tr class="tr-info">
<th>dodo</th>
<th>dodo2</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr class="tr-info">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="tr-info">
<td>dodo</td>
<td>d</td>
<td>d</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>