Cześć Panowie i Panie,
czy może ktoś mi z was pomóc znaleźć gdzie coś schrzaniłem prawdopodobnie w CSS...
Zabrałem się dzisiaj za zmianę "szaty graficznej" tabeli, no i niestety coś źle zrobiłem, że teraz dłuższy tekst w tabeli nie "łamie się" tylko jest w jednej ciągłej liny...
nie wiem za bardzo gdzie zrobiłem błąd.. testowałem już chyba wszystkie możliwości, może ktoś z większym doświadczeniem się z tym spotkał i wytyknie mi gdzie popełniłem błąd.
Dołączam zdjęcie jak to wygląda, przed modyfikacjami tabela dostosowywała się do szerokości przeglądarki, tekst się automatycznie załamywał tak aby cała tabela się mieściła w oknie.
Kombinuje już od kilku dobrych godzin i nie widzę nigdzie przyczyny...
Link do obrazka:
https://zapodaj.net/3692ea8d67d5b.png.htmlPoniżej css i php.
@font-face {
font-family: Poppins-Regular;
src: url("fonts/poppins/Poppins-Regular.ttf");
}
@font-face {
font-family: Poppins-Bold;
src: url("fonts/poppins/Poppins-Bold.ttf");
}
body
{
background-image: url("img/background.png");
font-size: 10px;
}
#container1
{
background-color: white;
width: auto;
padding: 50px;
margin-left: 5px;
margin-right: 5px;
margin-top: 50px;
-webkit-box-shadow: 5px 5px 20px 5px rgba(173,157,173,1);
-moz-box-shadow: 5px 5px 20px 5px rgba(173,157,173,1);
box-shadow: 5px 5px 20px 5px rgba(173,157,173,1);
}
h3
{
width: auto;
background-color: #efefef;
font-family: Poppins-Regular;
color: #808080;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 18px;
padding: 10px;
box-sizing: border-box;
margin-top: 10px;
}
textarea
{
width: 600px;
background-color: #efefef;
color: #666;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 20px;
padding: 10px;
box-sizing: border-box;
margin-top: 10px;
}
td
{
width: 10px;
height: auto;
background-color: white;
border: 1px #ddd;
border-radius: 0px;
font-size: 16px;
padding: 5px;
margin-top: 10px;
font-family: Poppins-Regular;
color: #808080;
line-height: 1.2;
text-transform: uppercase;
font
-weight
: unset !important
; margin-bottom: 10px;
text-align: center;
text-overflow: scroll;
}
td:hover
{
background-color: #f5f5f5;
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
table
{
width: 100%;
height: 100%;
background-color: white;
color: #666;
border: 5px solid #ddd;
border-radius: 5px;
font-size: 14px;
padding: 10px;
margin-top: 10px;
text-overflow: scroll;
}
button
{
width: 300px;
background-color: #DC143C;
font-size: 20px;
color: white;
padding: 15px 10px;
margin-top: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
letter-spacing: 2px;
margin-top: 30px;
}
.topnav {
background-color: #333;
overflow: hidden;
font-family: Poppins-Regular;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
-webkit-transition-duration: 0.9s;
transition-duration: 0.5s;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #6c7ae0;
color: white;
}
td.inna_td
{
width: auto;
height: 30px;
background-color: #efefef;
color: #666;
border: 3px solid #b1b1b1;
border-radius: 5px;
font-size: 14px;
padding: 10px;
margin-top: 10px;
text-overflow: scroll;
}
.przyp-btn-success
{
width: 100px;
background-color: #1E90FF;
font-family: Poppins-Regular;
font-size: 10px;
color: white;
padding: 7px 7px;
margin-top: 0px;
border: none;
border-radius: 3px;
cursor: pointer;
letter-spacing: 2px;
margin-top: auto;
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.przyp-btn-success:hover
{
background-color: #DC143C;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.edit-btn-success
{
width: 100px;
background-color: #1E90FF;
font-family: Poppins-Regular;
font-size: 10px;
color: white;
padding: 7px 7px;
margin-top: 0px;
border: none;
border-radius: 3px;
cursor: pointer;
letter-spacing: 2px;
margin-top: auto;
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.edit-btn-success:hover
{
background-color: #DC143C;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.status-btn-success
{
width: 100px;
background-color: #1E90FF;
font-family: Poppins-Regular;
font-size: 10px;
color: white;
padding: 7px 7px;
margin-top: 0px;
border: none;
border-radius: 3px;
cursor: pointer;
letter-spacing: 2px;
margin-top: auto;
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.status-btn-success:hover
{
background-color: #DC143C;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
th
{
color: #ffffff;
background: #6c7ae0;
display: table-cell;
font-family: Poppins-Regular;
font-size: 16px;
line-height: 1.2;
font
-weight
: unset !important
; padding-top: 19px;
padding-bottom: 19px;
border-radius: 5px;
text-overflow: scroll;
}
th:hover
{
background-color: #4b5499;
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
label
{
background: #6c7ae0;
}
No i kodzik programu, trochę okrojony ale zachowałem najważniejsze części
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatibile" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container1">
<div class="topnav">
<a class="active" href="hd.php">Otwarte zgłoszenia</a>
<a href="hd_rozwiazane.php">Rozwiązane zgłoszenia</a>
</div>
<table>
<tr>
<th>ID</th>
<th>Imię</th>
<th>Nazwisko</th>
<th>Oddział</th>
<th>Numer wew</th>
<th>Numer pok</th>
<th>Adres e-mail</th>
<th>Treść zgłoszenia</th>
<th>Data zgłoszenia</th>
<th>Przypisana osoba</th>
<th>Opis rozwiązania</th>
<th>Status</th>
<th>Działanie</th>
</tr>
......
<tr>
<td>
<?php echo $row['id']; ?></td>
<td>
<?php echo $row['imie']; ?></td>
<td>
<?php echo $row['nazwisko']; ?></td>
<td>
<?php echo $row['wydzial']; ?></td>
<td>
<?php echo $row['numer_wew']; ?></td>
<td>
<?php echo $row['numer_pok']; ?></td>
<td>
<?php echo $row['e_mail']; ?></td>
<td>
<?php echo $row['opis']; ?></td>
<td>
<?php echo $row['data_dodania']; ?></td>
<td>
<?php echo $row['przyp_osoba']; ?> <form action="edit_person.php" method="post">
<input type="hidden" name="edit_id" value="
<?php echo $row['id']; ?>">
<button type="submit" name="przyp_btn" class="przyp-btn-success"> Przypisz</button>
</form>
</td>
<td>
<?php echo $row['opis_czynnosci']; ?> <form action="edit.php" method="post">
<input type="hidden" name="edit_id" value="
<?php echo $row['id']; ?>">
<button type="submit" name="edit_btn" class="edit-btn-success"> Edytuj</button>
</form>
</td>
<td>
<?php echo $row['status']; ?></td>
<td>
<form action="edit_status.php" method="post">
<input type="hidden" name="edit_id" value="
<?php echo $row['id']; ?>">
<button type="submit" name="status_btn" class="status-btn-success"> Rozwiązane</button>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>