CSS 및 표 테두리 문제

파란색 배경에 10x10 타일이있는 격자를 만들려고합니다. 모든 타일은 정사각형이어야하며 파란색으로 채워야하며 각 타일은 작은 검정색 선으로 구분해야합니다. CSS에서 테이블의 서식을 지정할 때 가장자리가 너무 넓어서 사소하면서도 꽤 큰 문제입니다. 문제가 무엇인지 알 수 없습니까?CSS 및 표 테두리 문제

var boatStatusClient = ""; 
 
var x_client = 0; 
 
var y_client = 0; 
 
var battlefield_client = ""; 
 

 
var source_client; 
 
var boatGrid = { 
 
    placeBoat_client: function() { 
 
    source_client = event.target || event.srcElement; 
 
    source_client = source_client.id 
 
    source_client.id = document.getElementById(source_client.id); 
 
    document.getElementById(source_client).style.backgroundColor = "orange"; 
 

 
    }, 
 
} 
 

 
for (y_client = 1; y_client < 11; y_client++) { 
 
    battlefield_client += "<tr>"; 
 
    for (x_client = 1; x_client < 11; x_client++) { 
 
    battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + ">&nbsp</td>"; 
 
    } 
 
    battlefield_client += "</tr>"; 
 
} 
 

 
$(document).ready(function() { 
 
    $("#tableGrid_client").html(battlefield_client); //loads table 
 

 
    for (y_client = 1; y_client < 11; y_client++) { 
 
    for (x_client = 1; x_client < 11; x_client++) { 
 
     boatStatusClient = document.getElementById('cell_client_' + x_client + "_" + y_client); 
 
     boatStatusClient.addEventListener("click", function() { 
 
     boatGrid.placeBoat_client() 
 
     }); 
 
    } 
 
    } 
 
});

table { 
 
    border-collapse: collapse; 
 
    border: none; 
 
} 
 
.tile { 
 
    background-color: #34B0D9; 
 
    cursor: pointer; 
 
} 
 
.tile:hover { 
 
    background-color: #6fcdec; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="hideGames"> 
 
    <table style="position:absolute; top: 20px; left: 20px; border:6px solid #ff5050; width: 500px; height: 500px;" id="tableGrid_client"></table>

출처

2016-11-05 Maxim Webb

당신은 단지에 table-layout:fixed를 추가 할 필요가 당신의 table

고정 표 및 열 폭이 테이블과 COL 요소의 폭에 의해 설정된다

또는 셀의 첫 번째 행의 너비만큼. 행의 셀은 열 너비에 영향을주지 않습니다.

"고정"레이아웃 방법에서는 첫 번째 테이블 행을 다운로드하여 분석 한 후에 전체 테이블을 렌더링 할 수 있습니다. 이 경우 은 "자동"레이아웃 메서드보다 렌더링 시간이 빨라질 수 있지만 이후 셀 내용이 제공된 열 너비에 맞지 않을 수 있습니다. 오버플로되는 내용이있는 셀은 오버플로 속성을 으로 사용하여 오버플로 내용을 클립할지 여부를 결정합니다.

참고 :은 인라인 스타일을 피하십시오.

var boatStatusClient = ""; 
 
    var x_client = 0; 
 
    var y_client = 0; 
 
    var battlefield_client = ""; 
 

 
    for (y_client = 1; y_client < 11; y_client++) { 
 
     battlefield_client += "<tr>"; 
 
     for (x_client = 1; x_client < 11; x_client++) { 
 
     battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + ">&nbsp</td>"; 
 
     } 
 
     battlefield_client += "</tr>"; 
 
    } 
 
    $(document).ready(function() { 
 
     $("#tableGrid_client").html(battlefield_client); //loads table 
 

 
     for (y_client = 1; y_client < 11; y_client++) { 
 
     for (x_client = 1; x_client < 11; x_client++) { 
 
      boatStatusClient = document.getElementById('cell_client_' + x_client + "_" + y_client); 
 
      boatStatusClient.addEventListener("click", function() { 
 
      boatGrid.placeBoat_client() 
 
      }); 
 
     } 
 
     } 
 
    });

body { 
 
    font-size: 118%; 
 
    font-family: calibri light; 
 
    background-color: #E8E8E8 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    border: none; 
 
    table-layout: fixed; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 20px; 
 
    border: 6px solid #ff5050; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 
.tile { 
 
    background-color: #34B0D9; 
 
    cursor: pointer; 
 
} 
 
.tile:hover { 
 
    background-color: #6fcdec; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
    <!--START OF GAMES PART--> 
 
    <div class="hideGames"> 
 
    <table style="" id="tableGrid_client"></table> 
 
    </div> 
 
    <!--END OF GAMES PART -->

출처

2016-11-05 00:14:55 dippas

감사합니다,하지만 당신은 테이블 레이아웃이 무엇인지 설명 할 수 있습니다, 기능은 고정 왜 작동? –

답변이 업데이트되었습니다. 이 방법으로 문제가 해결되면 대답을 승인 된 것으로 표시하십시오. – dippas

CSS 및 표 테두리 문제

답변

관련 문제