CSS 위치 웹 디자인

Question

CSS과 자바 스크립트 파일을 변경해야합니다. 머리글 행과 일부 열이 있고 개체의 크기를 조절할 때 머리글이 더 이상 열에 맞지 않습니다. 그래서 열 머리글을 고쳐야하고 그들은 CSS의 다른 클래스에 있습니다. 여기에 picture의 링크가 있습니다. 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를 클래스

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>";  

Answer 1

내가 언급 할 수있는 1 개 쇼 해요를 호출되어 자바 스크립트 부분이다, 그래서 나는 대답으로이 게재됩니다.

자바 스크립트 부분에는 firstColumnHeader 변수의 정의와 if의 첫 번째 절반이 htmlFirstColumn 주위에 누락되어 있습니다. 내가 잘라 내기 및 붙여 넣기 오류 및 일부 출력 이후 나쁜 코드가없는 것으로 가정합니다.

HTML을 작성하는 javascript를 게시하는 대신보기 소스를 사용하여 javascript에 의해 생성 된 html 코드를 붙여 넣는 경우 도움이됩니다.

위에서 볼 수 있듯이 열 머리글과 테이블 열을 같은 방법으로 포맷하지 않은 것처럼 보이기 때문에 정확히 똑같이 렌더링되지 않습니다.