mam takie drukowane dokumenty do wypełnienia przez osobę
Imię ......................................
Nazwisko ..................................
Adres .....................................
Wykształcenie .............................
i te poszczególne pola są jako komórki tabeli.
Ale na podglądzie zawsze muszę ręcznie dodawać lub usuwać kropeczki w każdej linii, aby były w miarę równo.
Ale może jest na to lepszy i łatwiejszy sposób, żeby te wszystkie kropeczki były równo (jak justowanie)
Tabela, raczej w tym przypadku wydaję się zbędna. Masz wiesze, jako sekcje w których są elementy. W przykładzie nie ma nazw kolumn.
HTML:
<div class="section">
<span class="label">Imię</span><span class="dots">................</span>
</div>
<div class="section">
<span class="label">Nazwisko</span><span class="dots">................</span>
</div>
<div class="section">
<span class="label">Adres</span><span class="dots">................</span>
</div>
<div class="section">
<span class="label">Wykształcenie</span><span class="dots">................</span>
</div>
CSS:
.section {
display: grid;
grid-template-columns: 150px 1fr;
column-gap: 10px;
margin-bottom: 10px;
}
.label {
text-align: left;
}
.dots {
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 600px) {
.section {
grid-template-columns: 1fr;
}
.dots {
text-align: left;
}
}
w tym rozwiązaniu kropeczki kończą się równo, ale zaczynają się także równo. A w pierwotnym dokumencie zaczynały się zaraz za słowem tytułowym.
ma być tak
Imię .........................................
Nazwisko .....................................
Adres ........................................
Wykształcenie ................................
a nie tak
Imię ......................................
Nazwisko ......................................
Adres ......................................
Wykształcenie ......................................
HTML:
<div class="section">
<div class="section--group">
<label class="label">Imię</label>
<span class="dots"></span>
</div>
<div class="section--group">
<label class="label">Nazwisko</label>
<span class="dots"></span>
</div>
<div class="section--group">
<label class="label">Adres</label>
<span class="dots"></span>
</div>
<div class="section--group">
<label class="label">Wykształcenie</label>
<span class="dots"></span>
</div>
</div>
CSS:
.section--group {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.label {
margin-right: 10px;
white-space: nowrap;
}
.dots {
flex-grow: 1;
border-bottom: 1px dotted black; // dotted - styl obramowania w kropki
height: 8px;
}
@media (max-width: 600px) {
.section--group {
flex-direction: column;
align-items: flex-start;
}
.dots {
width: 100%;
margin-top: 5px;
}
}