Bootstrap面板 - 主溢出-x滚动背景颜色

时间:2017-04-05 16:59:14

标签: css twitter-bootstrap

这是一个关于bootstrap面板的CSS问题。如果你打开下面的jsfiddle并调整显示以激活overflow-x,你会看到bootstrap panel-heading的蓝色背景颜色转换为白色而不是保持蓝色。当overflow-x被激活时,保持蓝色需要什么?

CSS:

  .panel-primary {
    max-width: 100%;
    overflow-x:scroll;
    white-space: nowrap;
  }

HTML:

<div class="row form-group">
<div class="panel panel-primary">
<div id="hpanel" class="panel-heading">Heading</div>
<div class="panel-body">
  <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
        <th>Col7</th>
        <th>Col8</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>some data</td>
       <td>some data</td>
       <td>some data</td>
       <td>some data</td>
       <td>some data</td>
       <td>some data</td>
       <td>some data</td>
       <td>some data</td>

     </tr>
    </tbody>
  </table>
</div>
</div> 
</div>

JS:

$(document).ready(function() {
var table = $('#example').DataTable( {

    } );
} );

jsfiddle

由于

1 个答案:

答案 0 :(得分:0)

在玩了几件事之后,我回答了自己的问题。我在桌子周围创建了一个div。

    ProcessBuilder builder = new ProcessBuilder();
    //-*snip*-
    Process p = null;
    Throwable error = null;
    int returnCode = -1;
    String output = null;
    StringBuilder stdErr = new StringBuilder(200);
    try{
        p = builder.start();
        try (Writer w = new BufferedWriter(new OutputStreamWriter(p.
                getOutputStream()))){
            w.write(html);
        }
        Process reference = p;
        //read both outputs so tidy has no reason to wait
        Thread errReader = new Thread(()->{
            StringBuilderWriter writer = new StringBuilderWriter(stdErr);
            try {
                IOUtils.copy(reference.getErrorStream(), writer,
                        Charsets.UTF_8);
            }
            catch (IOException ex) {
                //nom...
                //An IOE that happens here will likely happen when reading
                //stdout as well.
            }
        });
        errReader.start();
        //tidy might be waiting for us to consume output
        output = IOUtils.toString(p.getInputStream());
        returnCode = p.waitFor();
        errReader.join();
    }

这使得表格数据响应而不是面板并解决了颜色问题,并且可能更好的方式来处理事情。我用更新后的代码更新了我原来的小提琴。

由于