Tabela a responsywność

Odpowiedz Nowy wątek
2019-08-28 08:31
0

Mam tabele która jest umieszczona na stronie. Dane są pobierane zewnątrz. Chciałbym aby tabela była responsywna i mam problem jak to zrobić.

Kod poniżej

<?php
include 'arnold.php';

$link = mysqli_connect("******", "*****", "******");
$link->set_charset("utf8");
$i = 0;
if (!$link) {
    echo "Error: Unable to connect to MySQL." . PHP_EOL;
    echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;

    // this will tell you why the connection failed
    echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;

    exit;
}
mysqli_select_db($link, "pogodynka");

$dodtemp = ("SHOW TABLES");
$sth = mysqli_query($link, $dodtemp) or die ('Nie wysortowanos! '. mysqli_error($link));

while ($row = mysqli_fetch_row($sth)) {
    $nazwy[$i] = $row[0];
$i++;
}
edytowany 2x, ostatnio: cerrato, 2019-08-28 09:22

Pozostało 580 znaków

2019-08-28 09:22
5

Ale co masz na myśli, kiedy piszesz o "responsywności"?

Jeśli chodzi Ci o RWD, czyli dopasowywanie układu strony do rozmiaru okna przeglądarki, to po pierwsze - temat nie ma nic wspólnego z PHP, a jedynie z HTML/CSS, więc zamieściłeś post w złej kategorii, a po drugie to pokazałeś jedynie sposób pobierania danych z bazy, ale nie dałeś kodu, który wyświetla/generuje HTML z pobranych danych.

Tak czy siak - z tabelkami responsywność jest problemem, bo są one stworzone do sztywnego układu, który zawsze powinien wyglądać tak samo. Zresztą daaawno temu, zanim CSS stał się taki popularny, często budowało się układ strony w oparciu o tabelki - właśnie dlatego, że były one niezmienne, więc układ na nich oparty nie powinien się rozjechać. Nie było to może optymalne rozwiązanie, ale w tamtych czasach CSS dopiero raczkował, nie miał nawet połowy tego, co można z nim zrobić obecnie, a do tego bardzo mało osób umiało z niego poprawnie korzystać. No więc efekt był taki, że ludzie walili tabelki, w których osadzali jakieś grafiki będące elementem tła i strona jakoś działała.

A jeżeli miałeś na myśli coś innego, to wyjaśnij, co się kryje pod hasłem "responsywność tabeli".


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say
edytowany 2x, ostatnio: cerrato, 2019-08-28 10:05

Pozostało 580 znaków

2019-08-28 13:13
1

Najprościej, aby utrzymać layout zrobić przewijaną poziomo jak w bootstrapie.


Pozostało 580 znaków

2019-08-28 14:37
2
cerrato napisał(a):

Tak czy siak - z tabelkami responsywność jest problemem, bo są one stworzone do sztywnego układu, który zawsze powinien wyglądać tak samo.

I niestety wiele stron w imię źle pojętej responsywności rezygnuje w ogóle z tabelek "uszczęśliwiając" wszystkich jakimiś durnymi kaflami w miejsce czytelnego, tabelarycznego układu danych.


Pozostało 580 znaków

2019-08-28 19:39
2

Możesz spróbować użyć też https://datatables.net/ z pluginem dla rwd.

edytowany 1x, ostatnio: serek, 2019-08-28 19:39

Pozostało 580 znaków

2019-08-28 22:36
1

Nie znam się na PHP, ale na tyle, na ile mogę ocenić kod, to nie widzę w nim informacji na temat tego, jak duża jest ta tabela i jakie dane zawiera.

W moim rozumieniu tabele z zasady nie powinny być za bardzo responsywne – powinny być raczej sztywne, jak zauważył @cerrato. To znaczy, dana tabela może być i responsywna, ale wtedy musi to być dostosowane do tego, jak duża jest tabela i jakie dane zawiera. Chodzi mi o to, czy tabelę można np. stronicować, oraz czy poszczególne kolumny mogą zostać przeniesione/zmniejszone itp.


edytowany 3x, ostatnio: Silv, 2019-08-28 22:39

Pozostało 580 znaków

2019-09-01 16:03
0

Dzięki za odpowiedzi. Zostaniemy przy sztywnej tabeli. Dane staną się nie czytlene na komórce. Chyba że jest rozwiązanie :)
Jest 15 kolumn i około 25 wierszy.

Kod tak wygląda


.mn_sd1{
    background-color:#f9fafc!important
}

.mn_sd2{}

.mn_in a {
    color:white!important
}

.np_bta{
    font-size:12px
}

.info_table tr th {
    font-size:13px
}

.info_table thead th{
    padding-top:10px
}

.PrawyNav{
    position:relative;
    margin:20px 5px 0 0;
    width:250px!important;
    float:right
}

.PrawyNav table {
    width:100%!important
}

itd...

.gory_table td,.gory_table th{padding:5px;line-height:16px, color:#fff}
.gory_table{font-family:'Monda';font-size:11px;margin:15px 0 15px 0;width:100%;border-collapse:separate;}
.gory_table tr:first-child th:first-child{-webkit-border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;border-radius:5px 0 0 0}
.gory_table tr:first-child th:last-child{-webkit-border-radius:0 5px 0 0;-moz-border-radius:0 5px 0 0;border-radius:0 5px 0 0}
.gory_table tr:last-child td:first-child{-webkit-border-radius:0 0 0 5px;-moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px}
.gory_table tr:last-child td:last-child{-webkit-border-radius:00px5px0px;-moz-border-radius:00px5px0px;border-radius:0 0 5px 0}
.gory_table tr:first-child th{border:3px solid #727272}
.gory_table td{text-align:center;border:1px solid #727272;border-bottom:1px solid #E5E5E5;background-color: #404040, color:#fff}
.gory_table td:first-child{border:1px solid #727272, color:red}
.gory_table td img{vertical-align:middle}
.gory_table tr th{font-family:'Monda';text-align:center;background-color:#424242;font-size:12px;font-weight:300;color:#FFF;border:2px solid #878787}
.gory_table tr.k1 td,.synopy tr.k3 td{background-color:#F2F3F5}
.gory_table td img.zjawisko{position:absolute;top:0;left:0;display:block;float:left}
.gory_table td img.chmury{position:absolute;top:11px;left:15px;display:block;float:left}
.gory_table td .ico{position:relative;width:62px;height:46px;margin:0 auto}

$strona = file_get_contents("http://***************;
preg_match_all('|nbsp;(T.*<\/table>)|Us',$strona, $out);
edytowany 3x, ostatnio: cerrato, 2019-09-01 20:27

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0