Question

我有一个面板，里面有一个标题和一个表格。如果表宽度可以根据我们传递的数据动态增加。所以我将面板溢出设置为自动。现在我想在溢出的情况下调整标题的宽度，即它应该占用100％的宽度。 Jsfiddle - http://jsfiddle.net/DeoD/4z4a3fwy/

<root>
    <Maintag>
        <Change_type>NQ</Change_type>
        <Name>Atlas</Name>
        <Test>ATLS</Test>
        <Other>NYSE</Other>
        <Scheduled_E/></Maintag></root>

Answer 1

我刚刚在代码中做了一些更改。我认为这将是有用的，不需要使用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;
}

Fiddle Refer

我把h3放在

中

并且对于h3，在css中将宽度设置为100％

Answer 2

您可以将标题的宽度设置为与表格的宽度相同，如下所示

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

这是Fiddle Example

Answer 3

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

＆＃13;

function adjustResultPanel(){
    var tableWidth = $('.table').width();
    var resultPanelWidth = $('.resultPanel').width();
    if ( tableWidth > resultPanelWidth ){
        $('.resultPanel').width(tableWidth)
    } 
}


$(function(){

  adjustResultPanel();

});

＆＃13;

您的更新小提琴：http://jsfiddle.net/4z4a3fwy/19/

Answer 4

将标题宽度设置为100％

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

Answer 5

最简单的解决方案是将您的表（和h3）放在一个带有display: inline-block

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

请参阅：http://jsfiddle.net/ddan/4z4a3fwy/27/

使div宽度等于它的兄弟？

5 个答案: