|
Ocena wątku:
- 1 głosów - średnia: 5
- 1
- 2
- 3
- 4
- 5
|
XHTML/CSS/PHP Ustawienie szerokości kolumn w tabeli.
|
Liczba postów: 27
Liczba wątków: 7
Dołączył: 14-02-2011
Reputacja:
0
Witam.
Tworze sobie baze danych potrzebną do serwisu i mam problem, ponieważ nie mogę ustawić własnych szerokości kolumn.
XHTML:
Kod: <?php
print '<?xml version="1.0" encoding="iso-8859-2"?>';
print '<?xml-stylesheet type="text/css" href="xhtml.css"?>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<?
include("polacz.php");
mysql_connect('localhost',$username,$password);
@mysql_select_db($database) or die("Nie odnaleziono bazy danych");
$query="SELECT * FROM przyjecia";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
?>
<!-- To jest miejsce na treść dokumentu -->
<table>
<h1>Serwis</h1>
<thead>
<tr>
<td>ID</td>
<td>Data przyjęcia</td>
<td>Model</td>
<td>Imei</td>
<td>Uwagi</td>
</tr>
</thead>
<tbody>
<?
$i=0;
while ($i < $num) {
$did_pozycja=mysql_result($result,$i,"id_pozycja");
$ddata_przyjecia=mysql_result($result,$i,"data_przyjecia");
$dmodel=mysql_result($result,$i,"model");
$dnr_imei=mysql_result($result,$i,"nr_imei");
$duwagi=mysql_result($result,$i,"uwagi");
?>
<tr>
<td><? echo $did_pozycja ?></td>
<td style="width: 100px"><? echo $ddata_przyjecia ?></td> <!-- Ta kolumna nie chce dostosować się do wartości "width" -->
<td><? echo $dmodel ?></td>
<td><? echo $dnr_imei ?></td>
<td><? echo $duwagi ?></td>
</tr>
<?
$i++;
}
?>
</tbody>
<tfoot>
<tr>
<td colspan="5">HTML/CSS/PHP/MySQL</td>
</tr>
</tfoot>
</table>
<div style="position: absolute; left: 10px; top: 75px">
<form action="wpis.php" method="post">
<fieldset>
<legend>Edycja</legend>
<label>Data przyjęcia:</label> <input type="text" name="data_przyjecia" class='i1'><br>
<label>Model:</label> <input type="text" name="model" class='i1'><br>
<label>Nr imei:</label> <input type="text" name="nr_imei" class='i1'><br>
<label>Uwagi:</label> <input type="text" name="uwagi" class='i1' ><br>
<label></label><input type="submit" value="Wyślij" style="margin: 2px 4px 0px 4px;">
</fieldset>
</form>
</div>
</body>
</html>
CSS:
Kod: h1 {
text-align: center;
}
table {
width: 600px;
margin: 0 auto;
}
table thead {
background: #000;
color: #fff;
}
table tbody {
background: transparent;
color: #000;
}
table tfoot {
background: #525252;
color: #fff;
text-align: right;
}
table tfoot a:link, table tfoot a:visited {
color: #fff;
text-decoration: underline;
}
table tfoot a:hover {
color: #fff;
text-decoration: none;
}
table tbody tr:hover {
background: #FFE9A0;
}
table tbody tr:nth-child(even) {
background: #EBEBEB;
}
table tbody tr:nth-child(odd) {
background: #D6D6D6;
}
table tbody tr:hover {
background: #FFE9A0;
}
.i1 {
background-color:#EBEBEB;
border: 1px solid #006;
margin: 2px 4px 0px 4px;
}
label {
display: block;
width: 150px;
float: left;
margin: 2px 4px -1px 4px;
text-align: right;
}
Konkretnie chodzi o pozycje: Kod: <td style="width: 100px"><? echo $ddata_przyjecia ?></td>
Mimo ustawienia width 100px kolumna nie zmienia swojej szerokości.
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
1) klasy, klasy, klasy.
Nie <td style="......"> a <td class="waskie">
2)
Masz:
<table>
<h1>Serwis</h1>
Powinno być:
<table>
<caption>Serwis</caption>
Wygląd uzyskasz w stylach
3) table-layout:fixed - możesz dodać dla table (poczytaj w google).
4) Z tabelkami już tak jest, że różnie się renderują. Kilka porad:
* Stosuj cellpadding="0" cellspacing="0" jako atrybuty table. Uratują ci często życie
* Szerokość td jest uzależniona od jej wnętrza. Dlatego może ci się wszystko rozwalać, gdy tekst będzie za długi
* TD nie ma position:relative; Jeżeli chcesz coś takiego mieć, wtedy musisz zagnieździć div
* czasami łatwiej jest stosować Liste zamiast tabeli. Sporadycznie ale zdarza się 
Liczba postów: 27
Liczba wątków: 7
Dołączył: 14-02-2011
Reputacja:
0
27-02-2011, 19:23
(Ten post był ostatnio modyfikowany: 27-02-2011, 20:00 przez hghormone.)
Dzięki za podpowiedzi.
Napisałeś,że "Szerokość td jest uzależniona od jej wnętrza. Dlatego może ci się wszystko rozwalać, gdy tekst będzie za długi", a ja właśnie mam ten problem, że np kolumna "Uwagi", będzie zawsze zawierała dużo informacji i nie zmieszczą się one w niej ,ale nie zależy mi na tym, w kolumnie wystarczy, że będzie widać tylko kawałek tekstu, reszte obsłuże tak, że kolumna uwagi wyświetli się potem w innym formularzu, tylko jak temu zaradzić, żeby mimo długiego tekstu kolumna się nie rozszerzała ?
Próbowałem też ze stylami Kod: <td class="k_data_przyjecia"><? echo $ddata_przyjecia ?></td>
CSS:
Kod: .k_data_przyjecia {
width: 10px;
}
Mimo wszystko kolumna nie zmienia swojej szerokości.
Oczywiście dodałem również "table-layout:fixed", lecz nie pomaga.
Możliwe, że źle sie wyraziłem.
Chodzi mi o to aby komórka była mniejsza niż jej zawartość tzn.aby na ekranie była wyświetlana tylko część jej zawartości.Cała zawartość komórki ma być wyświetlona w osobnym formularzu po jej wybraniu z tabeli. 
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
27-02-2011, 20:09
(Ten post był ostatnio modyfikowany: 27-02-2011, 20:10 przez Kartofelek.)
Nie da się ;]
Ogólnie zastosuj technikę div ...
<td class="k_data_przyjecia>
<div>bla bla bla</div>
</td>
.k_data_przyjecia div {width:10px; overflow:hidden;}
http://stackoverflow.com/questions/446624/table-cell-widths-fixing-width-wrapping-truncating-long-words
Pamiętam, że Riddle fajnie o tym pisał :
http://riddle.jogger.pl/2006/07/31/przycinanie-dlugich-linijek-tekstu/
Może się przyda
Liczba postów: 27
Liczba wątków: 7
Dołączył: 14-02-2011
Reputacja:
0
27-02-2011, 20:23
(Ten post był ostatnio modyfikowany: 27-02-2011, 20:23 przez hghormone.)
Heh, właśnie zanim przeczytałem twoją podpowiedź walczyłem cały czas z "overflow:hidden" i rzeczywiście to ukrywa tak jak chciałem, pozostał mi tylko problem ze zmniejszeniem danej komórki, " width: 10px;" nie pomaga.To tak wygląda jakby pewna minimalna wartość szerokości komórki była juz ustalona i nie można zrobić, aby była mniejsza.
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
a cellpadding i cellspacing ustawione ma? a padding i margin dla td ma?
Liczba postów: 27
Liczba wątków: 7
Dołączył: 14-02-2011
Reputacja:
0
Czy chodzi o to ?
CSS:
Kod: td {
padding:0px
margin: 0px}
XHTML:
Kod: <table cellpadding="0" cellspacing="2">
Bo wstawiłem to,ale nie pomaga, nadal nie moge zmniejszyć rozmiaru danej kolumny.
Liczba postów: 27
Liczba wątków: 7
Dołączył: 14-02-2011
Reputacja:
0
27-02-2011, 22:56
(Ten post był ostatnio modyfikowany: 27-02-2011, 23:07 przez hghormone.)
Udało mi się rozwiązać problem, z jednym małym ale:
XHTML:
Kod: <?php
print '<?xml version="1.0" encoding="iso-8859-2"?>';
print '<?xml-stylesheet type="text/css" href="xhtml.css"?>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<?
include("polacz.php");
mysql_connect('localhost',$username,$password);
@mysql_select_db($database) or die("Nie odnaleziono bazy danych");
$query="SELECT * FROM przyjecia";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
?>
<!-- To jest miejsce na treść dokumentu -->
<table>
<caption>Serwis</caption>
<thead>
<tr>
<td class="k_pozycja">ID</td>
<td class="k_data_przyjecia">Data przyjęcia</td>
<td class="k_model">Model</td>
<td class="k_imei">Imei</td>
<td class="k_uwagi">Uwagi</td>
</tr>
</thead>
<tbody>
<?
$i=0;
while ($i < $num) {
$did_pozycja=mysql_result($result,$i,"id_pozycja");
$ddata_przyjecia=mysql_result($result,$i,"data_przyjecia");
$dmodel=mysql_result($result,$i,"model");
$dnr_imei=mysql_result($result,$i,"nr_imei");
$duwagi=mysql_result($result,$i,"uwagi");
?>
<tr>
<td class="k_pozycja"><? echo $did_pozycja ?></td>
<td class="k_data_przyjecia"><? echo $ddata_przyjecia ?></td>
<td class="k_model"><? echo $dmodel ?></td>
<td class="k_nr_imei"><? echo $dnr_imei ?></td>
<td class="k_uwagi"><? echo $duwagi ?></td>
</tr>
<?
$i++;
}
?>
</tbody>
<tfoot>
<tr>
<td colspan="5">HTML/CSS/PHP/MySQL</td>
</tr>
</tfoot>
</table>
<div style="position: absolute; left: 10px; top: 75px">
<form action="wpis.php" method="post">
<fieldset>
<legend>Edycja</legend>
<label>Data przyjęcia:</label> <input type="text" name="data_przyjecia" class='i1'><br>
<label>Model:</label> <input type="text" name="model" class='i1'><br>
<label>Nr imei:</label> <input type="text" name="nr_imei" class='i1'><br>
<label>Uwagi:</label> <input type="text" name="uwagi" class='i1' ><br>
<label></label><input type="submit" value="Wyślij" style="margin: 2px 4px 0px 4px;">
</fieldset>
</form>
</div>
</body>
</html>
CSS:
Kod: h1 {
text-align: center;
}
table {
width: 40%;
margin: 0 auto;
table-layout: fixed;
}
table thead {
background: #000;
color: #fff;
}
table tbody {
background: transparent;
color: #000;
}
table tfoot {
background: #525252;
color: #fff;
text-align: right;
}
table tfoot a:link, table tfoot a:visited {
color: #fff;
text-decoration: underline;
}
table tfoot a:hover {
color: #fff;
text-decoration: none;
}
table tbody tr:hover {
background: #FFE9A0;
}
table tbody tr:nth-child(even) {
background: #EBEBEB;
}
table tbody tr:nth-child(odd) {
background: #D6D6D6;
}
table tbody tr:hover {
background: #FFE9A0;
}
label {
display: block;
width: 150px;
float: left;
margin: 2px 4px -1px 4px;
text-align: right;
}
caption {
font-size: 40px;
font-style: normal;
}
td {
padding:0px 0px;
margin: 10px
}
.i1 {
background-color:#EBEBEB;
border: 1px solid #006;
margin: 2px 4px 0px 4px;
}
.k_pozycja{
width:5% ;overflow:hidden;
}
.k_data_przyjecia{
width:17% ;overflow:hidden;
}
.k_model{
width:27% ;overflow:hidden;
}
.k_nr_imei{
width:20% ;overflow:hidden;
}
.k_uwagi{
width:35% ;overflow:hidden;
}
Ogolnie wszystko jest ok, w bazie wpisanych mam 70 pozycji i wszytskie się wpisują w tabele, za długie wpisy elegancko mi przycina jeśli są za długie, z wyjątkiem 23 pozycji w której znajduje się za długi nr imei, zamiast go przyciąć to rozszerzyła mi się jedna ramka o jedną linie, zupełnie nie wiem dlaczego.W innych pozycjach też mam za długie nry imei i one sa bez problemu przycięte.Nie moge tego zrozumieć.
Już wiem w czym problem ,sprawdziłem w bazie i okazuje się, że w 23 pozycji nr imei jest wpisany ze spacją i to go rózni od innych pozycji.
Ale dlaczego tak się dzieje ? Przecież gdy np.w uwagach bedzie dlugi opis i on bedzie zawierał spacje to będzie działo się to samo.Jak poradzić sobie z tym problemem ?
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
Ale twarda spacja czy spacja miękka? Bo to różnica. Może po prostu nie potrafi zawinąć.
Wystaw na sieci, wtedy się zobaczy.
Co to?
<?php
print '<?xml version="1.0" encoding="iso-8859-2"?>';
print '<?xml-stylesheet type="text/css" href="xhtml.css"?>';
?>
Liczba postów: 27
Liczba wątków: 7
Dołączył: 14-02-2011
Reputacja:
0
A więc tak, jeśli chodzi o spacje to nie wiem czy to twarda spacja czy spacja miękka, po prostu zwykła spacja używana podczas wpisywania do input-a  .
Wiem, że to śmiesznie brzmi, ale naprawdę jestem początkującym, ale chętnym do nauki.
Jeśli chodzi o zamieszczenie w necie to postaram się to niedługo zrobić,bo na chwilę obecną tworze wszystko na wirtualnym serwerze XAMPP i wszystko chciałem przenieść po zakończeniu projektu.
Co do: Kod: <?php
print '<?xml version="1.0" encoding="iso-8859-2"?>';
print '<?xml-stylesheet type="text/css" href="xhtml.css"?>';
?>
Wpisałem tak na początku pliku, ponieważ na necie wyczytałem, że tak powinien wyglądać początek, ale wychodzi na to, że chyba jestem w błędzie.
Na razie korzystam z "Pajączka", bo on ułatwia mi naukę.Podczas tworzenie nowego projektu projektu mam do wyboru coś takiego jak "Deklaracja typu dokumentu (według specyfikacjiW3C)" i ja zawsze wybieram pozycje: Kod: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Nie wiem czy jest to wybór, ponieważ jest tam wiele różnych pozycji, a ja przyznam szczerze, że na obecnym etapie nauki nie orientuje się co to dokładnie jest.Jeśli mógłbyś mnie chociaż troszkę oświecić w tym temacie, to będę bardzo wdzięczny .
Wracając do tematy po wybraniu pozycji o której pisałem wyżej, zmieniam nazwę pliku z .html na .php, ponieważ będę korzystał ze skryptów "php" na mojej stronie (z tego co wyczytałem w necie tak należy zrobić), ale pojawia się właśnie problem gdy chce uruchomić plik z tą stroną, a robię to np. w taki sposób "localhost/Tabela.php", ale mimo wszystko próba uruchomienia takiego pliku kończy się niepowodzeniem i informacją o błędach w pierwszych liniach, więc po poszukiwaniach w necie wyczytałem, że początek należy zmienić na formę:
Kod: <?php
print '<?xml version="1.0" encoding="iso-8859-2"?>';
print '<?xml-stylesheet type="text/css" href="xhtml.css"?>';
?>
Standardowo forma przed zmianą wygląda tak:
Kod: <?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Dopiero po zmianie udaje mi się uruchomić stronę.
Byłoby fajnie jeśli pomógłbyś mi ze zrozumieniem błędów jakie popełniam .
|
| Podobne wątki… |
| Wątek: |
Autor |
Odpowiedzi: |
Wyświetleń: |
Ostatni post |
| |
[CSS][HTML] Ustawienie obrazka z boku strony |
Witek7777 |
8 |
8,477 |
22-09-2016, 01:05
Ostatni post: pocahontas
|
| |
Importowanie wybranych danych z Excel do tabeli w html |
fabsik |
1 |
2,903 |
16-01-2014, 15:41
Ostatni post: fabsik
|
| |
kursor znika po deklaracji języka xhtml |
[email protected] |
2 |
2,544 |
12-12-2012, 16:26
Ostatni post: [email protected]
|
| |
Strona w zagnieżdżonej tabeli |
exevan |
10 |
7,830 |
29-09-2012, 03:36
Ostatni post: hieroshima
|
| |
Ustawienie obrazków obok siebie |
przemek2909 |
3 |
2,378 |
22-08-2012, 16:10
Ostatni post: kornell
|
Użytkownicy przeglądający ten wątek: 1 gości
|
|
|
Sponsorzy i przyjaciele
|
|
|
