CSS和表格邊框問題
[英]Issue with CSS and table borders
問題描述
我正在嘗試制作一個具有10x10瓷磚的藍色背景的網格。 所有圖塊都必須是正方形的，並且需要用藍色填充，並用細黑線分隔每個圖塊。 當我在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 + "> </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
您只需要添加table-layout:fixed到您的table
固定
表和列的寬度由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 + "> </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 -->
Chrome CSS問題與表格邊框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.