Tabela nie przylegające do 100% wysokości

Edycja: Aktualizacja z kodem w odpowiedziTabela nie przylegające do 100% wysokości

Mam tabeli, które muszę wypełnić 100% wysokości i zachować szerokość taka sama, jak wysokość. Używam vh, aby spróbować tego dokonać.

index.html:

var board = document.getElementById('board'); 
 
var draw = ''; 
 
var letters = 'abcdefgh'; 
 
var init = '♖♘♗♕♔♗♘♖♙♙♙♙♙♙♙♙        ♟♟♟♟♟♟♟♟♜♞♝♛♚♝♞♜'; 
 
for (var column = 8; column > 0; column--) { 
 
    draw += '<tr id="' + column + '" class="row">'; 
 
    for (var row = 0; row < 8; row++) { 
 
    draw += '<td id="' + letters.charAt(row) + column + '" class="tile">' + init.charAt(row + 8 * column - 8) + '</td>'; 
 
    } 
 
    draw += '</tr>'; 
 
} 
 
board.innerHTML = draw;

html, 
 
body, td, th { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#board-wrapper, 
 
#board { 
 
    border-spacing: 0; 
 
    float: left; 
 
    height: 100vh; 
 
    width: 100vh; 
 
} 
 
.tile { 
 
    background-color: #fff; 
 
    font-size: 6vh; 
 
    height: 12.5vh; 
 
    width: 12.5vh; 
 
    text-align: center; 
 
} 
 
.row:nth-child(even) .tile:nth-child(odd), 
 
.row:nth-child(odd) .tile:nth-child(even) { 
 
    background-color: #777; 
 
}

<!DOCTYPE html> 
 
<html lang="en-US"> 
 

 
<head> 
 
    <title>TitaniumChess</title> 
 
    <meta charset="UTF-8"> 
 
    <link href="default.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <table id="board-wrapper"> 
 
    <tbody id="board"></tbody> 
 
    </table> 
 
    <script src="main.js"> 
 
    </script> 
 
</body> 
 

 
</html>

Jednakże, to wymaga się więcej niż 100% wzrost. Jak mam to naprawić?

Źródło

2016-08-09 Julian Lachniet

Należy zresetować domyślną wartość przeglądarki td padding. Polecam skorzystanie reset CSS, jak normalize.css (link to HTML5Boilerplate) który robi to dla Ciebie:

/* Tables 


/** 
* Remove most spacing between table cells. 
*/ 

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

td, 
th { 
    padding: 0; 
}

Źródło

2016-08-09 20:09:40 Vucko

To jest miejsce na odpowiedź, ale może to być również przydatne do dodać, że z powodu, że jest to odpowiedź, ponieważ [wysokość jest obliczana wewnątrz dopełnienia] (https://developer.mozilla.org/en-US/docs/Web/CSS/height). Oryginalny kod ustawiał każdą komórkę tabeli na 1/8 wysokości okna, a następnie dodawano dopełnienie. – Hopeless

To sprawia, że tabela jest teraz zbyt mała. Zaktualizowałem przykład na żywo, aby można było zobaczyć problem. –

@Hopeless dopełnienie jest dodawane od początku, ponieważ element 'td' dziedziczy domyślną wartość dopełnienia przeglądarki. Jeśli OP nie chce go zresetować, może użyć właściwości 'box-sizing: border-box', która będzie zawierać wartość dopełnienia do wysokości. – Vucko

Tabela nie przylegające do 100% wysokości

Odpowiedz

Powiązane problemy