CSS定位网页设计

我必须在某些CSS和Javascript文件中进行更改。我有一个标题行和一些列，当我缩放对象时，标题不再与列对齐。所以我必须用列修复标题，它们在CSS的不同类中.这是图片的链接。这些是Qlikview的代码。

.c6graph {  
margin-left: 7px;
margin-top: 5px;
width:100%;
height:100%;
 }
    /* Start of "Micro clearfix" */
    .cf { zoom: 0; }
    .cf:before,
    .cf:after { content: ""; display: table; }
    .cf:after { clear: both; }
    /* End of "Micro clearfix" */

       .e6headerrow {
           font-size:8pt; 
            font-family:Tahoma;
           font-weight:bold;
          padding: 5px;}
       .e6firstcolumn {
            text-align: left;
            width: 14% !Important;
            max-width: 14%; 
            min-width: 14%;}
      .e6thirdforthcolumn {display:inline-block;
        text-align: center;
         width: 43% !Important;
        max-width: 43%; 
        min-width: 43%;}

'这是调用这个CSS类的JavaScript部分

    var html = "<table class='c6graph cf' cellpadding=0 cellspacing=0><colgroup ><col      class='e6headerrow e6firstcolumn''/><col class='e6headerrow e6thirdforthcolumn'/><col class='e6headerrow e6thirdforthcolumn'/></colgroup>"; 
      html += "<tr>" + firstColumnHeader + "<td class='e6headerrow e6thirdforthcolumn' >" + thirdColumnValue + "</td><td class='e6headerrow e6thirdforthcolumn' >" + fourthColumnValue + "</td></tr>";
    htmlFirstColumn = "<td class='e6thirdforthcolumn' ><div class='ext neg'><div style='width: " 
            + widthValue1 + ";' class='bar " + (isSwitchBorder == 1 ? "border-neg" : "") + "'></div><div class='progressneg " + progressRounded + "'>" + row[1].text + "</div></div></td>"; 
        }
        else {
            htmlFirstColumn = "<td class='e6thirdforthcolumn' ><div class='ext pos'><div style='width: " 
            + widthValue1 + ";' class='bar "+ (isSwitchBorder == 1 ? "border-pos" : "") + "'></div><div class='progresspos  " + progressRounded + "'>" + row[1].text + "</div></div></td>";
        }
        var widthValue2 = Math.abs(parseInt(row[2].text))*factorTotvar + "%";
        var htmlSecondColumn = "";
        if(row[2].text.substring(0,1) == "-") {
            htmlSecondColumn = "<td class='e6thirdforthcolumn' ><div class='ext neg'><div style='width: " 
            + widthValue2 + ";' class='bar "+ (isSwitchBorder == 1 ? "border-neg" : "") + "'></div><div class='progressneg  " + progressRounded3 + "'>" + row[2].text + "</div></div></td>";    
        }
        else {
            htmlSecondColumn = "<td class='e6thirdforthcolumn' ><div class='ext pos'><div style='width: " 
            + widthValue2 + ";' class='bar "+ (isSwitchBorder == 1 ? "border-pos" : "") + "'></div><div class='progresspos  " + progressRounded3 + "'>" + row[2].text + "</div></div></td>";
        }

        var firstColumnRow = (isDimensionEnabled != 1 ? "<td class='e6firstcolumn'>" + dimensionBolded + "</td>" : "");
        html += "<tr>" + firstColumnRow;
        html +=htmlFirstColumn;
        html +=htmlSecondColumn;
        html +="</tr>";