Html 使div宽度等于其同级宽度？

我有一个面板，里面有一个标题和一个表格。如果表宽度可以根据我们传递的数据动态增加。所以我已经将面板溢出设置为自动。现在我想调整页眉的宽度，以防溢出，也就是说，页眉的宽度应为100%。 Jsfiddle-

标题
资料
数据
数据
资料
数据
数据

---

我刚刚对代码做了一些更改。我认为它会很有用，不需要使用jQuery

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


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

标题
资料
数据
数据
资料
数据
数据
.resultPanel{
溢出：自动；
填充顶部：40px；
左侧填充：10px；
宽度：500px；
}
.头衔{
背景颜色：灰色；
线高：40px；
左侧填充：10px；
边际上限：0px；
边缘底部：20px；
文本对齐：左对齐；
}
.桌子{
宽度：700px；
}

我把h3放进去了

---

对于h3，在css中将宽度设置为100%

您可以将页眉的宽度设置为和表格的宽度相同，如下所示

$(document).ready(function(){
     $('.title').css('width',$('.table').width());  
});

---

这里是

您只需创建一个检查表格宽度的函数。 如果表格的宽度大于.resultPanel的宽度，则将.resultPanel宽度调整为表格的宽度：

功能调整结果面板（）{
var tableWidth=$（'.table'）.width（）；
var resultPanelWidth=$（'.resultPanel'）.width（）；
如果（tableWidth>resultPanelWidth）{
$（'.resultPanel'）.width（表格宽度）
} 
}
$（函数（）{
adjustResultPanel（）；
});将标题宽度设置为100%

 .title {
      background-color: gray;
      line-height: 40px;
      padding-left: 10px;
      margin-top: 0px;
        width:100%;
      margin-bottom: 20px;
    }

最简单的解决方案是使用
display:inline block

<div class="resultPanel">
    <div style='display: inline-block'>
            <h3 class="title">Title</h3>
            <table class="table">
                <tr>
                    <td>data</td>                    
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>                    
                    <td>data</td>
                    <td>data</td>
                </tr>
            </table>   
    </div>
 </div>


标题
资料
数据
数据
资料
数据
数据

见：

<div class="resultPanel">
    <div style='display: inline-block'>
            <h3 class="title">Title</h3>
            <table class="table">
                <tr>
                    <td>data</td>                    
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>                    
                    <td>data</td>
                    <td>data</td>
                </tr>
            </table>   
    </div>
 </div>