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和表格边框问题

回答

相关问题