Forum PHP.pl > [CSS][HTML]Tabela w html - różna szerokość komórek

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML]Tabela w html - różna szerokość komórek

kosmos

8.09.2023, 12:38:55

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?

kayman

11.09.2023, 12:44:49

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

https://getbootstrap.com/docs/5.2/layout/grid/

Malinaa

6.10.2023, 08:14:16

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 
<html>
<head>
 <style>
  div.floating-table {
   width: 500px;
  }
  table {
   border-spacing: 0;
   border-collapse: collapse;
   border: 2px solid black;
  }
  table.table-bottom {
   border-top: 0;
  }
  td {
   padding: 10px;
   border-left: 2px solid black;
   border-right: 2px solid black;
  }
 </style>
</head>
<body>
 <div class="floating-table">
  <table width="100%">
  <tr>
   <td width="25%">A</td>
   <td width="35%">B</td>
   <td>C</td>
  </tr>
  </table>
  <table width="100%" class="table-bottom">
  <tr>
   <td>M</td>
   <td width="40%">N</td>
   <td width="15%">O</td>
   <td width="15%">P</td>
  </tr>
  </table>
 </div>
</body>
</html>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.