无法增加数据表

Question

我正在使用此数据表@fiddle的默认代码，但我面临两个问题，

1）当我试图增加列数时，整个css会受到干扰，并且分页，搜索，记录数量会消失

2）在响应式视图中，借助滚动条我可以水平和垂直查看数据，但我无法看到所有标题

任何人都可以告诉我们如何解决这两个问题

码

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"/>

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
    </tbody>
</table>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>

<script>
    $(document).ready(function() {
    $('#example').DataTable( {
    "scrollY":        "400px",
    "scrollCollapse": true
    } );
    } );
</script>