in chrome on my mac and windows this webpage renders exaclty as i want. the table fills the screen and all of the rows are even height and width. But in safari on mobile and desktop and chrome on mobile it does not evenly distribute the rows height.
i tried to google this and the only suggestion that i found was to use table-layout: fixed but this did not change the behavior for me at all.
so the question is how do i get the table rows and columns to distribute evenly on all browsers?
let table = document.getElementById("table1")
let rounds = 3
let players = 2
function calculate() {
for (let player = 0; player < players; player++) {
let playerScore = 0
for (let round = 0; round < rounds; round++) {
let draw = parseInt(document.querySelector(`tbody[player="${player}"] input[property="draw"][round="${round}"]`).value || 0)
let out = parseInt(document.querySelector(`tbody[player="${player}"] input[property="out"][round="${round}"]`).value || 0)
let hand = parseInt(document.querySelector(`tbody[player="${player}"] input[property="hand"][round="${round}"]`).value || 0)
let clean = parseInt(document.querySelector(`tbody[player="${player}"] input[property="clean"][round="${round}"]`).value || 0)
let dirty = parseInt(document.querySelector(`tbody[player="${player}"] input[property="dirty"][round="${round}"]`).value || 0)
let wilds = parseInt(document.querySelector(`tbody[player="${player}"] input[property="wilds"][round="${round}"]`).value || 0)
let threes = parseInt(document.querySelector(`tbody[player="${player}"] input[property="threes"][round="${round}"]`).value || 0)
let jokers = parseInt(document.querySelector(`tbody[player="${player}"] input[property="jokers"][round="${round}"]`).value || 0)
let aces = parseInt(document.querySelector(`tbody[player="${player}"] input[property="aces"][round="${round}"]`).value || 0)
let fours = parseInt(document.querySelector(`tbody[player="${player}"] input[property="fours"][round="${round}"]`).value || 0)
let eights = parseInt(document.querySelector(`tbody[player="${player}"] input[property="eights"][round="${round}"]`).value || 0)
let score =
(draw) + (out) + (-hand) + (clean * 500) + (dirty * 300) + (wilds * 1500) + (threes * 100) + (jokers * 50) + (aces * 20) + (fours * 5) + (eights * 10)
playerScore += score
let element = document.querySelector(`tbody[player="${player}"] th[round="${round}"]`)
element.innerHTML = score
}
document
.querySelector(`tbody[player="${player}"] th.total`)
.innerHTML = playerScore
}
}
function reset() {
}
function load() {
for (let player = 0; player < players; player++) {
let tbody = document.createElement("tbody")
tbody.setAttribute("player", player)
tbody.innerHTML = `
<tr>
<th>Player #${player+1}</th>
<th></th>
<th round="0"></th>
<th round="1"></th>
<th round="2"></th>
<th class="total"></th>
</tr>
<tr>
<td></td>
<td>Draw</td>
<td><input property="draw" round="0"/></td>
<td><input property="draw" round="1"/></td>
<td><input property="draw" round="2"/></td>
</tr>
<tr>
<td></td>
<td>Out</td>
<td><input property="out" round="0"/></td>
<td><input property="out" round="1"/></td>
<td><input property="out" round="2"/></td>
</tr>
<tr>
<td></td>
<td>Hand</td>
<td><input property="hand" round="0"/></td>
<td><input property="hand" round="1"/></td>
<td><input property="hand" round="2"/></td>
</tr>
<tr>
<td></td>
<td>Clean</td>
<td><input property="clean" round="0"/></td>
<td><input property="clean" round="1"/></td>
<td><input property="clean" round="2"/></td>
</tr>
<tr>
<td></td>
<td>Dirty</td>
<td><input property="dirty" round="0"/></td>
<td><input property="dirty" round="1"/></td>
<td><input property="dirty" round="2"/></td>
</tr>
<tr>
<td></td>
<td>Wilds</td>
<td><input property="wilds" round="0"/></td>
<td><input property="wilds" round="1"/></td>
<td><input property="wilds" round="2"/></td>
</tr>
<tr>
<td></td>
<td>Threes</td>
<td><input property="threes" round="0"/></td>
<td><input property="threes" round="1"/></td>
<td><input property="threes" round="2"/></td>
</tr>
<tr>
<td></td>
<td>Jokers</td>
<td><input property="jokers" round="0"/></td>
<td><input property="jokers" round="1"/></td>
<td><input property="jokers" round="2"/></td>
</tr>
<tr>
<td></td>
<td>Aces & 2</td>
<td><input property="aces" round="0"/></td>
<td><input property="aces" round="1"/></td>
<td><input property="aces" round="2"/></td>
</tr>
<tr>
<td></td>
<td>4 to 7</td>
<td><input property="fours" round="0"/></td>
<td><input property="fours" round="1"/></td>
<td><input property="fours" round="2"/></td>
</tr>
<tr>
<td></td>
<td>8 to K</td>
<td><input property="eights" round="0"/></td>
<td><input property="eights" round="1"/></td>
<td><input property="eights" round="2"/></td>
</tr>
`
table.appendChild(tbody)
}
}
load()* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
}
th,
td {
border: 1px solid lightgray;
}
input {
outline: 0;
border: 0;
width: 100%;
height: 100%;
}<table id="table1">
<thead>
<tr>
<th>Player</th>
<th>
<button onclick="calculate()">Calculate</button>
</th>
<th>Round #1</th>
<th>Round #2</th>
<th>Round #3</th>
<th>Total</th>
</tr>
</thead>
</table>