빈 셀이있는 테이블 행에는 테두리가 표시되지 않습니다.

데이터가 동적으로 채워진 테이블이 있습니다. 이것은 ASP.Net MVC에 있습니다.빈 셀이있는 테이블 행에는 테두리가 표시되지 않습니다.

테이블에 데이터가 추가 된 3 <tbody> 요소가 포함 된 다음 스크립트 태그에 일부 jQuery가있는 tbody 요소에 최종 테두리를 추가합니다. 각 tbody 요소에는 2 개의 행이 있고, 첫 번째 행은 완전히 비어 있으며, 서로 다른 tobdy 요소를 구분하는 데 사용됩니다. 두 번째 행에는 하나의 셀에 확인란이 있고 그 옆에 일부 텍스트가 있습니다.

테이블의 너비가 4 열이고 두 번째 행의 오른쪽에 2 개의 셀이 비어 있습니다. 행에 테두리를 추가하여 <tbody> 주위에 테두리를 추가하려고합니다. 나는 온라인으로 검색 한 다른 방법을 실험했지만 이것은 내가 얻을 수있는 가장 가까운 방법이었다.

기본적으로, 내 표 (측면의 테두리 연속)

_________________________________________________________ 
|                  | 

|                  | 

|_____________________________________________________________________|

각 행이에하자 오른쪽 테두리가되며, 마지막 행은 왼쪽, 오른쪽과 아래쪽이있을 것이다 다음과 같습니다 그것에 국경. 상단 행에는 왼쪽, 오른쪽 및 위쪽 테두리가 있지만 오른쪽 테두리는 표시되지 않습니다. 여기

는 HTML 코드입니다 :

<table id="[email protected]" cellpadding="20" style="border-collapse: collapse"> 
    <thead> 
     <tr> 
      <th><input type="checkbox" id="@wb.WorkBookId _SelectAllCheckbox"/></th><th>Timepoint</th><th>Information</th><th>Notifications/Errors</th><th>Preview</th> 
     </tr> 
    </thead> 
    <tbody id="@wb.WorkBookId _ErrorVisits"> 
     <tr><td></td><td></td><td></td><td></td></tr> 
     <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _ErrorCheckbox"/></td><td><b>Visits in Error</b></td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr> 
    </tbody> 
    <tbody id="@wb.WorkBookId _NotPreviouslySQCvisits"> 
     <tr><td></td><td></td><td></td><td></td></tr> 
     <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _NotSQCCheckbox"/></td><td><b>First Time Visits</b></td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr> 
    </tbody> 
    <tbody id="@wb.WorkBookId _PreSQCvisits"> 
     <tr><td></td><td></td><td></td><td></td></tr> 
     <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _PreSQCCheckbox"/></td><td><b>Previously Visits</b></td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr> 
    </tbody> 
     <!-- Loop through each visit collection to place each SQC ready visit in the desired location --> 
     @{ 
      // Razor code to dynamically add rows to tbody elements 

      <script type="text/javascript"> 
       if ($("#[email protected] > tbody:nth-child(2)").children().length < 3) { 
        //$("#[email protected] > tbody:nth-child(2)").remove(); 
        $("#[email protected] > tbody:nth-child(2)").hide(); 
       } else { 
        $("#[email protected] > tbody:nth-child(2) > tr:gt(0)").css({ "border-left": "2px solid black", "border-right": "2px solid black" }); 
       } 

       if ($("#[email protected] > tbody:nth-child(3)").children().length < 3) { 
        //$("#[email protected] > tbody:nth-child(3)").remove(); 
        $("#[email protected] > tbody:nth-child(3)").hide(); 
       } else { 
        $("#[email protected] > tbody:nth-child(3) > tr:gt(0)").css({ "border-left": "2px solid black", "border-right": "2px solid black" }); 
       } 

       if ($("#[email protected] > tbody:nth-child(4)").children().length < 3) { 
        //$("#[email protected] > tbody:nth-child(4)").remove(); 
        $("#[email protected] > tbody:nth-child(4)").hide(); 
       } else { 
        $("#[email protected] > tbody:nth-child(4) > tr:gt(0)").css({ "border-left": "2px solid black", "border-right": "2px solid black" }); 
       } 

       $("#[email protected] > tbody:nth-child(2) > tr:last").css({ "border-bottom": "2px solid black" }); 
       $("#[email protected] > tbody:nth-child(3) > tr:last").css({ "border-bottom": "2px solid black" }); 
       $("#[email protected] > tbody:nth-child(4) > tr:last").css({ "border-bottom": "2px solid black" }); 
      </script> 
     } 
</table>

이 어떻게 경계를 표시 할 수 있습니까?

자세한 내용을 알고 싶으면 알려주십시오.

나는 IE9와 크롬 모두에서이를 테스트했으며, 둘 다 똑같은 것을 보여 주었다.

출처

2014-07-09 RXC

나는 코드를 가지고 놀고/해결책을 찾아 냈다.

내 테이블에 방금  이라는 빈 셀을 추가했습니다. 원래 <tbody>

<tbody id="@wb.WorkBookId _ErrorVisits"> 
     <tr><td></td><td></td><td></td><td></td></tr> 
     <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _ErrorCheckbox"/></td><td><b>Visits in Error</b></td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr> 
    </tbody>

새로운 <tbody> :

<tbody id="@wb.WorkBookId _ErrorVisits"> 
     <tr><td></td><td></td><td></td><td></td></tr> 
     <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _ErrorCheckbox"/></td><td><b>Visits in Error</b></td><td>&nbsp;</td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr> 
    </tbody>

아마

하지 최상의 솔루션하지만 지금은 작동

출처

2014-07-11 12:59:51 RXC

봅니다이 추가 : <td>의 빈 일부 브라우저에서

$("#[email protected] td").each(function(){ 
    if($(this).text() === ''){ 
    $(this).html('&nbsp;') 
    } 
});

이 - 같은 물건을 올려 아무 내용이없는 경우 붕괴, 그래서 하나하는 경향 또는 <td>에게이 줄 바꿈없는 공백  을 배치 할 수 있습니다 것은 붕괴 아니다 .

출처

2014-07-09 13:21:01 Jai

불행히도'border-collapse' 속성을'collapse'로 설정하여 행에 테두리를 표시 할 수 있어야합니다. 나는'& nbsp'이 사용 된 것을보고 빈 셀의 일부에 추가 했으므로 아무런 차이가 없었습니다. – RXC

빈 셀이있는 테이블 행에는 테두리가 표시되지 않습니다.

답변

관련 문제