CSSと表の罫線の問題

10x10のタイルを持つ青い背景のグリッドを作成しようとしています。すべてのタイルは正方形である必要があり、青色で塗りつぶす必要があります。小さな黒い線で各タイルを区切ります。私はCSSでテーブルをフォーマットしているとき、それはあまりにも広い、縁がありますが、それはマイナーですが、かなりirratating問題です。私は問題が何かを見ることができません、他の誰もできますか？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

あなただけ

表と列の幅は、テーブルとCOL要素の幅で設定されている

を固定または

あなたtableにtable-layout:fixedを追加する必要がありますセルの第1の行の幅だけ移動する。の行のセルは列の幅に影響しません。

「固定」レイアウト方法では、最初のテーブル行がダウンロードされて解析された後に、テーブル全体がレンダリングされます。これにより、のレンダリング時間が「自動」レイアウト方法よりも高速になりますが、以降のセルの内容が、指定された列幅に収まらないことがあります。オーバーフローが発生するコンテンツを持つセルは、オーバーフロープロパティを使用してにオーバーフローコンテンツをクリップするかどうかを決定します。

注：はインラインスタイルを避けてください。

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>  <div class="hideGames"> <table style="" id="tableGrid_client"></table> </div> 

出典

2016-11-05 00:14:55 dippas

おかげで、しかし、あなたはどのようなテーブルレイアウトを説明することができます：固定機能であり、なぜそれが動作しますか？ –

答えが更新されました。これで問題が解決した場合は、回答を受け入れたものとしてマークしてください。 – dippas

答えて

関連する問題