我很抱歉 js 檔案中的挪威變數名,但是如果你嘗試單擊一個單元格,你會看到它的高度會調整大小,我想知道是否有人有一個簡單快速的更改!
<!doctype html>
<html lang="no">
<head>
<title> Standardoppsett </title>
<meta charset="utf-8">
</head>
<style>
.board {
table-layout: fixed;
width: 360px;
height: 360px;
border: 32px solid;
border-color: darkslategray;
border-radius: 5px;
}
.firkant {
border: 1px black solid;
}
.hvit{
background:white;
}
.svart{
background:grey;
}
td:hover {
background: lightgreen;
cursor: pointer
}
</style>
<body>
<div>
<table class="board"></table>
</div>
<script>
let tableEl = document.querySelector("table")
for(let i = 1; i < 9; i ) {
let trEl = document.createElement('tr');
for(let j = 1; j < 9; j ) {
let tdEl = document.createElement('td');
tdEl.setAttribute("id","rute" i j)
tdEl.addEventListener("click",plasserDronning)
trEl.appendChild(tdEl);
// Bare p? grunn av css
tdEl.className = (i%2 === j%2) ? "hvit firkant" : "svart firkant";
}
tableEl.appendChild(trEl);
}
turTeller = 0
function plasserDronning(e){
let firkantTrykket = e.target
console.log(firkantTrykket.id)
if (turTeller == 0) {
if(firkantTrykket = e.target){
firkantTrykket.innerHTML = "a";
}
turTeller = 1
}
else if(turTeller == 1) {
if(firkantTrykket = e.target){
firkantTrykket.innerHTML = "b";
}
turTeller = 2
}
}
</script>
</body>
</html>
到目前為止,我基本上已經嘗試了我所知道的一切,我嘗試將表格布局設定為固定,我嘗試將“td's”位置設定為頂部等等,如果有人知道我能做什么,它會意義重大!
uj5u.com熱心網友回復:
在上面的代碼中,我建議在你的 td 標簽的類中添加高度屬性,這將解決你的問題。如果您想回應更快,并且可以撰寫媒體查詢。或使用其他框架,如bootstap。
.hvit{
background:white;
height:20px;
}
.svart{
background:grey;
height:20px;
}
uj5u.com熱心網友回復:
您可以添加height:calc(100% / 8);到firkant(td) 類以防止單元格生長。
這樣,如果您決定增加表格大小或使其動態化,單元格將隨表格縮放。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/464638.html
標籤:javascript html css
