table表头不换行并允许横向滚动

在中加入nowrap=”nowrap”即可实现内容不换行的效果；滚动条效果需要通过设置overflow来实现。

<div id="test" style="width: 800px; height: 80px; overflow-x: auto;overflow-y: hidden">
    <table>
        <tr>
            <th nowrap="nowrap" style="padding-left:10px;padding-right:30px;">车辆的呼号th>
            <th nowrap="nowrap" style="padding-right:10px;">值班中队长th>
            <th nowrap="nowrap" style="padding-right:10px;">白天值班的老哥th>
            <th nowrap="nowrap" style="padding-right:10px;">晚上值班的老哥th>
            <th nowrap="nowrap" style="padding-right:30px;">排班时间th>
            <th nowrap="nowrap" style="padding-right:10px;">状态th>
            <th nowrap="nowrap" style="padding-right:30px;">车辆的呼号th>
            <th nowrap="nowrap" style="padding-right:10px;">值班中队长th>
            <th nowrap="nowrap" style="padding-right:10px;">白天值班的老哥th>
            <th nowrap="nowrap" style="padding-right:10px;">晚上值班的老哥th>
            <th nowrap="nowrap" style="padding-right:30px;">排班时间th>
            <th nowrap="nowrap" style="padding-right:10px;">状态th>
        tr>
        <tr>
            <td style="padding-left:10px;">item.callsigntd>
            <td> item.dutyoffice td>
            <td> item.daylaoge td>
            <td> item.nightlaoge td>
            <td> item.date td>
            <td> item.status td>
            <td> item.callsign td>
            <td> item.dutyoffice td>
            <td> item.daylaoge td>
            <td> item.nightlaoge td>
            <td> item.date td>
            <td> item.status td>
        tr>
    table>;
div>

对设置padding属性时，根据不同的框架和浏览器，padding有时会不起效果，对于这种情况我们可以在中加个

<td><div style='display:inline-block;width:10px'>div> item.dutyDate td>