[Bootstrap, table, Chrome] formátování tabulky

C++, C#, Visual Basic, Delphi, Perl a ostatní

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod dyžon 11. 11. 2019 12:00

zdravím,
můžete mi prosím poradit ?
potřebuji naformátovat tabulku, teda spíš její sloupce.
používám css bootstrapu, ale mám problém se zobrazením v různých prohlížečích.
respective ve Firefoxu je to správně, v chromu to nefunguje.
Kód: Vybrat vše
<html>

<head>
  <title>Hello!</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body style="max-width: 900px; margin: auto;">
<br  /><br />

<table class="table table-bordered table-hover table-sm">
  <thead class="table-secondary">
    <tr class="header">
      <td class="col-sm-1">jedna</td>
      <td class="col-sm-1">dvě</td>
      <td class="col-sm-5">tři</td>
      <td class="col-sm-3">čtyři</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>prvni</td>
      <td>druhá</td>
      <td>třetí</td>
      <td>čtvrtá</td>
    </tr>
    <tr>
      <td>prvni</td>
      <td>druhá</td>
      <td>třetí</td>
      <td>čtvrtá</td>
    </tr>
    <tr>
      <td>prvni</td>
      <td>druhá</td>
      <td>třetí</td>
      <td>čtvrtá</td>
    </tr>
    <tr>
      <td>prvni</td>
      <td>druhá</td>
      <td>třetí</td>
      <td>čtvrtá</td>
    </tr>
  </tbody>
</table>

</body>
</html>

firefox:
table_firefox.png
table_firefox.png (6.5 ) Zobrazeno 1734 krát

chrome:
table_chrome.png
table_chrome.png (6.27 ) Zobrazeno 1735 krát

IE je stejny jako chrome.
jasně, můžu si napsat svoje css a tabulku si naformátovat podle svého,ale chtěl bych to vyřešit spíš pomocí toho bootstrapu.
máte s tím někdo zkušenost ?, proč to tak je a jak se to dá vyřešit ??
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar

Odeslat příspěvekod Just_jo 12. 11. 2019 19:03

No asi bych začal opravou html kódu. Co třeba začít to psát správně.
V sekci thead používat TH - ostatně na stránkách bootstrapu tam mají i příklady.

A poprosil bych o změnu sekce - toto není programování ale Tvorba webových stránek a aplikací
Just_jo
Junior
Uživatelský avatar

Odeslat příspěvekod dyžon 12. 11. 2019 19:24

díky,
psal jsem to z hlavy, za td místo th se omlouvám, ale bohužel to stejně není ten problém.
za sekci se taky omlouvám, až dneska jsem si všiml, že jsem to napsal špatně, mám na tohle forum odkaz rovnou na programování.

každopádně po dlooooouhým hledání jsem našel alespoň nějakou pomoc
píšou, aby se nepoužívali třídy row a col na tabulkách, protože jsou to flexboxy, a tak narušují vlastnosti zobrazení tabulek.
Kód: Vybrat vše
<style>
table { table-layout: fixed; }
table th, table td { overflow: hidden; }
</style>

<table class="span12">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</th>
      <td>Val 2</th>
      <td>Val 3</th>
      <td>Val 4</th>
      <td>Val 5</th>
    </tr>
  </tbody>
</table>
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků