Pytanie Szerokość tabel HTML nie działa


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <table border="1" width="100%">

        <tr>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        </tr>


    </table>




</body>
</html>

Próbuję ustawić szerokość stołu na 100% dla powyższej tabeli, ale nie ma ona żadnego efektu, wykracza poza szerokość okna. jak zmienić szerokość tabeli, aby była taka sama jak w oknie.


14
2017-11-06 09:48


pochodzenie


W każdym razie nie możesz tego zmieścić w 100%. Więc, czego się spodziewałeś? Jeśli wyjaśnisz, na jaki efekt masz nadzieję, być może pomożemy to osiągnąć. - Mr Lister


Odpowiedzi:


Problem polega na tym, że zawartość wewnątrz stołu wymaga więcej miejsca niż 100% twoich ofert wielkości okna.

Co możesz zrobić, to użyć właściwości przepełnienia CSS. Wypróbuj poniższy przykład i wybierz, czy jest to opcja dla Ciebie:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
    .table {
        color: green;
        display: block;
        max-width: 100%;
        overflow: scroll; <!-- Available options: visible, hidden, scroll, auto -->
    }
</style>
</head>
<body>

<table border="1" class="table">

    <tr>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>


</table>
</body>
</html>

Dostępne są 4 opcje dla właściwości przepełnienia: widoczne, ukryte, przewijane i automatyczne. Powyższy przykład ilustruje opcję przewijania, która dodaje pasek przewijania do samej tabeli.


16
2017-11-06 10:04





Nic nie możesz zrobić, jeśli zawartość tabeli jest zbyt szeroka (jak w twoim przykładzie), poza zmianą zawartości, aby umożliwić przeglądarce wyświetlanie jej w węższym formacie. Oprawa width:100%; nie przyniesie efektu, jeśli zawartość jest zbyt szeroka. Przeglądarka po prostu ucieknie się do wyświetlania poziomego paska przewijania.

Możesz zawęzić treść za pomocą:

  • Zmniejszenie liczby kolumn
  • za pomocą CSS white-space: nowrap na dowolnej zawartości, więc przeglądarka ma możliwość zawijania tej treści, aby utrzymać szerokość w dół.
  • Zmniejsz wszelkie marginesy, granice, wypełnienia, które masz
  • Zmniejsz rozmiar czcionki
  • Posługiwać się word-wrap:break-word lub word-break: break-all;
  • Przepełnij zawartość, która nie mieści się w szerokości ekranu overflow: scroll; (twoje opcje są widoczne, ukryte, przewijane i automatyczne)

Przeglądarka uniknie paska przewijania, jeśli będzie mógł, ale nie będzie, jeśli zawartość nie mieści się na szerokości strony.


11
2017-11-06 09:59



Są inne rzeczy, które możesz zrobić. Zmień rozmiar czcionki, word-wrap:break-word itp. możliwe jest nawet utrzymywanie stołu w 100%, ale z tego powodu przepełnienie treści. Po prostu nie wiem, który z tych efektów OP miał nadzieję osiągnąć. - Mr Lister
Wrzucę też CSS word-break: break-all; - Duke
Pomoże ci, jeśli podasz rzeczywisty przykład, a nie po prostu użyjesz wypunktowania. - JGallardo


Możesz włożyć element do komórki - to właśnie zrobiłem.

<table>
    <tr>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
    </tr>
    <tr>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
    </tr>
</table>

0
2017-11-23 10:18





możesz umieścić klasę w swoim stole jak

 <table border="1" class="size" >

i z twojego css, które wkładasz

  .size{

             width : 100%;

             }

i powinieneś umieścić link twojego css pomiędzy lubię to :

<link href="css/YOUR_CSS.css" rel="stylesheet" type="text/css" media="all" />

-4
2017-11-06 09:56



Powinieneś przetestować te rzeczy zanim opublikujesz. Jeśli testowałeś, to widziałeś, że to rozwiązanie ma dokładnie taki sam problem jak OP. Nawet jeśli poprawiłeś błędy w swoim przykładzie. - Mr Lister
Przepraszam za szczerość, ale spojrzenie na twoje rozwiązanie sprawiło mi ból głowy. dzięki. - MarsOne
jeśli zaczniesz programowanie, zobaczysz, że html i css są w "parze" ogólnie, to znaczy, że css klasyfikujesz kod html ze względu na kod css. Tak więc, tworzysz nowy plik z .css i wywołujesz tę stronę za pomocą <link>, którą trzymam - Thomas Trabelsi
Możesz polubić wszystko, co chcesz, ale odpowiedzi tutaj mają mieć rozwiązania problemów, nie dostarczać więcej problemów. Po edycji nadal występuje błąd. I jak już powiedziałem, to nie zadziała nawet bez błędów! - Mr Lister
Czym jest "programowanie"? - Aaronius