Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML]Tabela w html - różna szerokość komórek
kosmos
post 8.09.2023, 12:38:55
Post #1





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----

Cześć.

Przykład tabelki:
Tabela

Zależy mi na tym, aby górny wiersz był na 100% szerokości i aby komórki posiadały różną szerokość. Collspan złączy mi komórki, ale szerokość ich będzie od siebie uzależniona względem poszczególnym wierszy.
oczekiwany rezultat

Czy jedyną opcją jest tabela zagnieżdżona w wierszu 2?

Ten post edytował kosmos 8.09.2023, 12:44:10
Go to the top of the page
+Quote Post
kayman
post 11.09.2023, 12:44:49
Post #2





Grupa: Zarejestrowani
Postów: 556
Pomógł: 40
Dołączył: 20.07.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

ja bym do tego użył raczej bootstrap a nie tabeli

https://getbootstrap.com/docs/5.2/layout/grid/
Go to the top of the page
+Quote Post
Malinaa
post 6.10.2023, 08:14:16
Post #3





Grupa: Zarejestrowani
Postów: 518
Pomógł: 6
Dołączył: 21.07.2008

Ostrzeżenie: (0%)
-----

Też użyłbym do tego Bootstrapa, przy tabeli i collspan pewnie nie zrobisz jak obrazujesz, ale jeżeli Ci zależy koniecznie na tabeli to możesz zakombinować z dwiema. Efekt wizualny otrzymasz dokładnie taki na jakim Ci zależy.

Przykładowy gotowiec: 

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  <style>
  4.   div.floating-table {
  5.    width: 500px;
  6.   }
  7.   table {
  8.    border-spacing: 0;
  9.    border-collapse: collapse;
  10.    border: 2px solid black;
  11.   }
  12.   table.table-bottom {
  13.    border-top: 0;
  14.   }
  15.   td {
  16.    padding: 10px;
  17.    border-left: 2px solid black;
  18.    border-right: 2px solid black;
  19.   }
  20.  </style>
  21. </head>
  22. <body>
  23.  <div class="floating-table">
  24.   <table width="100%">
  25.   <tr>
  26.    <td width="25%">A</td>
  27.    <td width="35%">B</td>
  28.    <td>C</td>
  29.   </tr>
  30.   </table>
  31.   <table width="100%" class="table-bottom">
  32.   <tr>
  33.    <td>M</td>
  34.    <td width="40%">N</td>
  35.    <td width="15%">O</td>
  36.    <td width="15%">P</td>
  37.   </tr>
  38.   </table>
  39.  </div>
  40. </body>
  41. </html>
[HTML] pobierz, plaintext


--------------------
I welcome you on the Internet >>> Design by Malina
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 27.04.2024 - 19:39
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn