Question

我使用CSS中的display：block修复了表格的标题。我还为列分配了固定宽度。我为表设置了最大高度200px，这就是我需要滚动条的原因。在chrome中，它工作得很好，列完全对齐。然而，在IE中它们没有对齐，这是由于由于某种原因位于表内的滚动条。为什么显示不同，我该如何解决这个问题？

我尝试使用引导表将滚动条放在表格之外，但列和标题仍未对齐。

这是IE中的表格

这是Chrome中的表格

<style>
* {
    box-sizing: border-box;
}

th:nth-child(1), td:nth-child(1) { width: 72px !important }
th:nth-child(2), td:nth-child(2) { width: 170px !important; }
th:nth-child(3), td:nth-child(3) { width: 95px !important; }
th:nth-child(4), td:nth-child(4) { width: 65px !important;}
th:nth-child(5), td:nth-child(5) { width: 90px  !important; }
th:nth-child(6), td:nth-child(6) { width: 90px  !important;}
th:nth-child(7), td:nth-child(7) { width: 90px  !important;}
th:nth-child(8), td:nth-child(8) { width: 90px  !important; }
th:nth-child(9), td:nth-child(9) { width: 90px  !important; }
th:nth-child(10), td:nth-child(10) { width: 90px  !important;}
 </style>

<div id="page-content" style="">     
    <div >
        <div id="wrap"> 


            <div class="row marginBottom0px">
                <span id=""  class="1204 1 IHM textLightGrey textBold  " style="margin-left: 2%;"></span>
                <div class="textAlignRight"  > 
                    <a  id="export" class="col-xs-offset-1 cursorPointer telecharger vCenter btnLvl5 notUnderlined" href="<c:url value="download" />"><span class="1039 1 IHM size23px" ></span><img class="marginBtnLvl5" src="<c:url value='/resources/img/telecharger.png' />" />
                    </a>  
                </div>
            </div>


            <div class=" row marginTop0px" >
                <form:form  id="form" action="DetSup" modelAttribute="myForm" method="POST" class="col-xs-36">      
                        <div id="tableExport1" class=" marginBottom20px"  >
                            <table id="TableDo1" class=" tablesorter" >
                                <thead style="display: block;">
                                    <tr class="size13px">
                                         <th  class="1611 1 IHM odd textAlignCenter noBorderLeft" >
                                        </th>   

                                        <th  class="1024 1 IHM odd textAlignCenter header " >
                                        </th>   

                                        <th  class="1205 1 IHM odd textAlignCenter header ">
                                        </th>

                                        <th  class="1012 1 IHM odd textAlignCenter header ">
                                        </th>

                                        <th  class=" jJLib odd textAlignCenter header">                     
                                                ${myForm.today}
                                        </th>   

                                        <th  class=" jUnLib odd textAlignCenter header" >
                                                ${myForm.todayOne}                  
                                        </th>   

                                        <th  class="jDeuxLib odd textAlignCenter header"> 
                                                ${myForm.todayTwo}  
                                        </th>

                                        <th  class="jTroisLib odd textAlignCenter header" >  
                                                    ${myForm.todayThree}    
                                        </th>

                                        <th  class="jQuatreLib odd textAlignCenter header">  
                                                    ${myForm.todayFour} 
                                        </th>

                                        <th  class="jCinqLib odd textAlignCenter header"> 
                                                    ${myForm.todayFive}                                                     
                                        </th>                                                                                                                                                                               
                                    </tr>
                                </thead>
                                <tbody style=" display: block; height: 120px !important; overflow: auto !important;">
                                     <c:if test="${empty myForm.myList}">
                                        <tr>
                                            <td colspan="8"><span class="1184 1 IHM"></span></td>
                                        </tr>
                                    </c:if> 
                                     <c:if test="${not empty myForm.myList}">
                                        <c:forEach items="${myForm.myList}" var="document"  varStatus="status" >
                                            <tr class="Do1 size12px">
                                                <td class="textAlignCenter">
                                                    <a class="tri" onclick="submitActionForm('myForm','myID','${document.myID}','doListeDetailFourn')">
                                                      <img src="<c:url value='/resources/img/picto_plus.png' />"  class="afficheCursor">
                                                    </a>
                                                </td>

                                                <td class=" textAlignLeft" >
                                                    ${document.myID} - ${document.myName}
                                                </td>
                                                <td class=" textAlignRight" >
                                                    <input type="hidden" class="monTotDo1 ${document.change}" value="${document.accountOri}"/>
                                                    ${document.account}
                                                </td>
                                                <td class="change1 textAlignCenter" >
                                                    ${document.change}
                                                </td>
                                                <td class=" textAlignRight" >
                                                    <input type="hidden" class="jJDoVal ${document.change}" value="${document.jJOri}"/>
                                                    ${document.jJ}
                                                </td>
                                                <td class=" textAlignRight" >
                                                    <input type="hidden" class="jJDoVal1 ${document.change}" value="${document.jUnOri}"/>
                                                    ${document.jUn}
                                                </td>
                                                <td class=" textAlignRight">
                                                    <input type="hidden" class="jJDoVal2 ${document.change}" value="${document.jDeuxOri}"/>
                                                    ${document.jDeux}
                                                </td>
                                                <td class=" textAlignRight">
                                                    <input type="hidden" class="jJDoVal3 ${document.change}" value="${document.jTroisOri}"/>
                                                    ${document.jTrois}
                                                </td>
                                                <td class=" textAlignRight" >
                                                    <input type="hidden" class="jJDoVal4 ${document.change}" value="${document.jQuatreOri}"/>
                                                    ${document.jQuatre}
                                                </td>
                                                <td class="textAlignRight" >
                                                    <input type="hidden" class="jJDo5 ${document.change}" value="${document.jCinqOri}"/>
                                                    ${document.jCinq}
                                                </td>
                                            </tr>
                                        </c:forEach>
                                     </c:if> 
                                </tbody>
                            </table>
                        </div>
                        <form:input type="hidden" id="myID" path="myIDSelectionne"/>    
                    </form:form>
                </div>
    </div>
</div>
</div>
</div>

Answer 1

我将tbody宽度从100％增加到102％。没有明显改变chrome中的任何内容，但它有助于在IE中完美地对齐标题和列。

如何在Internet Explorer CSS中将滚动条放在表外

1 个答案: