CSS和表格边框问题
[英]Issue with CSS and table borders
问题描述
I am trying to make a grid with a blue background that has 10x10 tiles. 
我正在尝试制作一个具有10x10瓷砖的蓝色背景的网格。 All the tiles need to be square, and they need to be filled with blue, with a small black line seperating each tile. 所有图块都必须是正方形的，并且需要用蓝色填充，并用细黑线分隔每个图块。 When I am formatting the table in CSS, it has edges that are too wide, which is an a minor, yet fairly irratating issue. 当我在CSS中格式化表格时，它的边缘太宽，这是一个较小的问题，但很恼人。 I cannot see what the issue is, can anyone else? 我看不出问题是什么，其他人可以吗？
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 + "> </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>
1 个解决方案
解决方案1
3 已采纳 2016-11-05 00:14:55
You just need to add table-layout:fixed to your table 您只需要添加table-layout:fixed到您的table
fixed
Table and column widths are set by the widths of table and col elements or by the width of the first row of cells.
Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed.
Note: avoid inline styles. 注意：避免使用内联样式。
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 + "> </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 -->
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.