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和表格邊框問題

回答

相關問題