1
私は開発者のアシスタントとして私の最初の練習の仕事に就いていて、彼はこのテーブルのレイアウトを修正するように頼んだ：テーブル本体の垂直スクロールバーがテーブルのレイアウトを台無しにするのを避ける方法
彼は3つのテーブル、ヘッダー1、ヘッダーのためのボディ用と別のものを使用していたし、彼は、細胞の配向を固定う、ヘッダー、フッターや身体を使って一つのテーブルにそれをすべて置くことを言いました。
しかし、私が読んでいたものから、垂直スクロールバーは幅から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は、使用されていないライブラリ挿入の混乱です。 私はスペースをとらないスクロールバーを見て、その上にマウスを置いたときにのみ表示されます。 どうすればこの問題を解決できますか？
テーブルの高さが135pxでも問題ありませんか？ – BSMP
確かに、私は小さな変更を修正することが許されています – Nooblhu
私はこれのための欺瞞を見つけることができると思うので私はここに答えを入れているが、スクロールバーを取り除く必要があるなら、 'height = '135px' style = 'overflow-y：scroll''。 – BSMP