set DIV width with jQuery code in CSS or style

Question

I am trying to set the width of the div equal to another div. I have been tried the various function as below but it is not working. Please help me, How I achieve the goal.

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

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

Why you set a width to the pseudoelement :before? you want width for div or for pseudoelement? — Sfili_81, Aug 03 '21 at 06:52
Most of the time, you should better change your HTML and CSS to accomplish this task. Only use JavaScript for design if you really can't achieve it with the structure and the styling. — Patrick Janser, Aug 03 '21 at 06:54
You can't access pseudo elements (`:before`) with jquery as they don't really exist (which is why they're called pseudo elements). See [this answer](https://stackoverflow.com/a/5041526/2181514) for more details. — freedomn-m, Aug 03 '21 at 08:04

score 0 · Answer 1 · answered Aug 03 '21 at 08:29

  $(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>

Thank you but not working in pseudoelement :before – Sidharth Aug 03 '21 at 08:38 — Sidharth, Aug 03 '21 at 08:38

score -1 · Answer 2 · answered Aug 03 '21 at 07:54

You can do this by using table. For eg:

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;
}

set DIV width with jQuery code in CSS or style

2 Answers2