Question

我作为开发人员助理的第一份练习工作，他已经让我修改了这张桌子的布局：

他正在使用3个表，一个用于标题，一个用于主体，另一个用于标题，他说使用页眉，页脚和正文将它们全部放在一个表中将修复单元格对齐。

但是，从我读过的内容来看，垂直滚动条距离宽度为16px，因此在按照要求更改后，布局仍然是错误的。

原始代码对每列使用固定宽度，实际上是使用javascript，php和ajax插入的。正如您所看到的，CSS很难使用，大多数样式都直接插入到html中。

            oHtml = "";             
            oHtml = oHtml + "<table class='tabInfoHistCliente' width='706px' height='200px'>";  
            oHtml = oHtml + "   <thead>";   
            oHtml = oHtml + "       <tr>";  
            oHtml = oHtml + "           <th class='tabInfoHistCliente_tdTit' colspan='9' align='center'>ESTADISTICA RECEPCION LOTES</td>";  
            oHtml = oHtml + "       </tr>";  

            oHtml = oHtml + "       <tr>";    
            oHtml = oHtml + "           <th class='tabInfoHistCliente_tdTit' width='80' >Fecha</td>";     
            oHtml = oHtml + "           <th class='tabInfoHistCliente_tdTit' width='40' >Cant. Lotes</td>";
            oHtml = oHtml + "           <th class='tabInfoHistCliente_tdTit' width='80' >Suma P.Humedo TM</td>";
            oHtml = oHtml + "           <th class='tabInfoHistCliente_tdTit' width='70' >Suma P. Seco TM</td>";   
            oHtml = oHtml + "           <th class='tabInfoHistCliente_tdTit' width='80' >Pond Ley Au oz/Tc</td>";
            oHtml = oHtml + "           <th class='tabInfoHistCliente_tdTit' width='90' >Pond Ley Au gr/Tm</td>";
            oHtml = oHtml + "           <th class='tabInfoHistCliente_tdTit' width='90' >Suma Total Fino Au lote gr</td>";
            oHtml = oHtml + "           <th class='tabInfoHistCliente_tdTit' width='80' >Pond PIO US$/OZ</td>";
            oHtml = oHtml + "           <th class='tabInfoHistCliente_tdTit' width='96' >Importe  US$</td>";
            oHtml = oHtml + "       </tr>";
            oHtml = oHtml + "   </thead>";  
            // TOTAL            
            oHtml = oHtml + "   <tbody class='tabInfoHistCliente' height='135px' style='overflow-y:scroll' >";    
            for (iFor = 0; iFor <= 7; iFor++) {   
                fTotales[iFor] = 0;
            }
            for (iFor = 0; iFor <= stringArray.length-1; iFor++) {   

                if (stringArray[iFor].length > 0) {  
                    iTotReg++;  

                    sPosXY = stringArray[iFor].split("()");
                                        //alert(stringArray[iFor]);
                    fTotales[0] = fTotales[0] + parseFloat(sPosXY[1]);
                    fTotales[1] = fTotales[1] + parseFloat(sPosXY[2]);
                    fTotales[2] = fTotales[2] + parseFloat(sPosXY[3]);
                    fTotales[3] = fTotales[3] + parseFloat(sPosXY[4]);
                    fTotales[4] = fTotales[4] + parseFloat(sPosXY[5]);
                    fTotales[5] = fTotales[5] + parseFloat(sPosXY[6]);
                    fTotales[6] = fTotales[6] + parseFloat(sPosXY[7]);
                    fTotales[7] = fTotales[7] + parseFloat(sPosXY[8]);


                    oHtml = oHtml + "       <tr>";
                    oHtml = oHtml + "           <td class='tabInfoHistCliente_tdDat' width='80'>" + sPosXY[0] + "</td>";
                    oHtml = oHtml + "           <td class='tabInfoHistCliente_tdDat' width='40' align='right' >" + xFormatNumber(sPosXY[1],0) + "</td>";
                    oHtml = oHtml + "           <td class='tabInfoHistCliente_tdDat' width='80' align='right' >" + xFormatNumber(sPosXY[2],2) + "</td>";
                    oHtml = oHtml + "           <td class='tabInfoHistCliente_tdDat' width='70' align='right' >" + xFormatNumber(sPosXY[3],2) + "</td>";
                    oHtml = oHtml + "           <td class='tabInfoHistCliente_tdDat' width='80' align='right' >" + xFormatNumber(sPosXY[4],2) + "</td>";
                    oHtml = oHtml + "           <td class='tabInfoHistCliente_tdDat' width='90' align='right' >" + xFormatNumber(sPosXY[5],2) + "</td>";
                    oHtml = oHtml + "           <td class='tabInfoHistCliente_tdDat' width='90' align='right' >" + xFormatNumber(sPosXY[6],2) + "</td>";
                    oHtml = oHtml + "           <td class='tabInfoHistCliente_tdDat' width='80' align='right' >" + xFormatNumber(sPosXY[7],2) + "</td>";
                    oHtml = oHtml + "           <td class='tabInfoHistCliente_tdDat' width='80' align='right' >" + xFormatNumber(sPosXY[8],2) + "</td>";
                    oHtml = oHtml + "       </tr>"; 

                    arrResCompras[0] = fTotales[0];
                    arrResCompras[1] = fTotales[1];
                    arrResCompras[2] = fTotales[2];
                    arrResCompras[3] = fTotales[3];
                    arrResCompras[4] = fTotales[4];
                    arrResCompras[5] = fTotales[5];
                    arrResCompras[6] = fTotales[6];
                    arrResCompras[7] = fTotales[7];
                }
            }           
            oHtml = oHtml + "   </tbody>";  

            // TOTAL            
            oHtml = oHtml + "   <tfoot class='tabInfoHistCliente' height='15px' >";   
            oHtml = oHtml + "       <tr>";    
            oHtml = oHtml + "           <td class='tabInfoHistCliente_tdTit' width='80' >TOTALES</td>";   
            oHtml = oHtml + "           <td class='tabInfoHistCliente_tdTit' width='40' >" + xFormatNumber(fTotales[0],0) + "</td>";
            oHtml = oHtml + "           <td class='tabInfoHistCliente_tdTit' width='80' >" + xFormatNumber(fTotales[1],2) + "</td>";
            oHtml = oHtml + "           <td class='tabInfoHistCliente_tdTit' width='70' >" + xFormatNumber(fTotales[2],2) + "</td>";      
            oHtml = oHtml + "           <td class='tabInfoHistCliente_tdTit' width='80' >" + xFormatNumber(fTotales[3],2) + "</td>";
            oHtml = oHtml + "           <td class='tabInfoHistCliente_tdTit' width='90' >" + xFormatNumber(fTotales[4],2) + "</td>";
            oHtml = oHtml + "           <td class='tabInfoHistCliente_tdTit' width='90' >" + xFormatNumber(fTotales[5],2) + "</td>";
            oHtml = oHtml + "           <td class='tabInfoHistCliente_tdTit' width='80' >" + xFormatNumber(fTotales[6],2) + "</td>";
            oHtml = oHtml + "           <td class='tabInfoHistCliente_tdTit' width='96' >" + xFormatNumber(fTotales[7],2) + "</td>";
            oHtml = oHtml + "       </tr>"; 
            oHtml = oHtml + "   </tfoot>";
            oHtml = oHtml + "</table>";

所以我的问题是：有什么方法可以修复布局吗？将16px添加到最后一个标题列似乎不起作用（正文中为80px，页眉和页脚中为96px）。我已经看过使用jquery的解决方案，但我不确定是否正在使用jquery。 html是一堆没有使用的库插入。我认为我看过的滚动条没有空间，只有当你将鼠标悬停在它们上面时才会出现。我该如何解决这个问题？

Answer 1

从table和tablebody标签中删除高度。这样，表格将扩展以修复，但是数据库中的许多行都是Fred。

Answer 2

只需在您的 td 元素中添加样式word-break: break-all。它将完成所有的魔术。

如何通过获取宽度来避免表体中的垂直滚动条破坏表的布局

2 个答案: