设置DIV宽度的jQuery代码在CSS或样式

Question

我试图设置div的宽度等于另一个div。我已经尝试了各种功能如下，但它不工作。请帮助我，我如何实现目标。

.myclass:before {
width: $("div.mydivclass").width();
} 
$(".myclass:before").css('width', $("div.mydivclass").width());

Answer 1

$(document).ready(function(){
var getDivWidth = $('.mydivclass').width(); 
$('.myclass').css({'width':getDivWidth,'border':'solid 1px #000','padding':'20px','margin':'10px 0px 0px'});
});

.mydivclass{
padding: 20px;
width: 200px;
border: solid 1px #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydivclass">
Div 1
</div>
<div class="myclass">
same width
</div>

Answer 2

可以使用table。如:

HTML: -

<div class="resultPanel">
<table class="table">
<thead>
<tr>
<th colspan="3"><h3 class="title">Title</h3></th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>                    
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>                    
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>        
</div>

CSS: -

.resultPanel {
overflow: auto;
padding-top: 40px;
padding-left: 10px;
width: 500px;
}
.title {
background-color: gray;
line-height: 40px;
padding-left: 10px;
margin-top: 0px;
margin-bottom: 20px;
text-align: left;
}
.table{
width:700px;
}