Kirjautuminen

Haku

Tehtävät

Kilpailu

Putka Open 2025
4. kierros:
7.11. klo 18 – 9.11. klo 23

Keskustelu: Nettisivujen teko: Taulukko ja CSS vanhoissa selaimissa

xxmss [19.04.2018 22:44:49]

#

Ongelmana olisi tällainen simppeli HTML-sivu ja esim. nettiselain, joka tulee iPhone SE:n tai LG Optimus L5 E610:n (Android Webkit browser) mukana. Jostain syystä noiden laitteiden selaimilla taulukon solut eivät CSS:stä huolimatta näy allekkain vaan rinnakkain.

Taulukossa on siis yksi rivi ja siinä kaksi solua, jotka haluaisin CSS:n avulla näkyvän allekkain eikä rinnakkakkain.

Miten saisin solut näkymään allekkain ilman, että muokkaan HTML-koodissa olevan taulukon rakennetta?

<html>

<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css2.css" type="text/css">
</head>

<body>

<table>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
</tr>
</table>

</body>

</html>
td {display:block; width:100%; box-sizing:border-box; clear:both;}

Lisäys:

Löysin tällaisen ratkaisun, mutta toki parempi ratkaisu kelpaisi:

td-display-block-not-working-on-android

Teuro [20.04.2018 05:26:54]

#

Stackoverflow:a löysin mahdollisesti tarkoitukseesi sopivan pätkän.

td, th {
  text-align: left;
  display: block;
  float: left;
  width: 100%;
}

thead {
  display: none;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone no.</th>
      <th>Address</th>
      <th>Wealth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>John Doe</th>
      <td>00123456789</td>
      <td>Morgue St. 21</td>
      <td>$100,000</td>
    </tr><tr>
      <th>Mary Sue</th>
      <td>00987654321</td>
      <td>Impossible St. 12</td>
      <td>$999,999,999,999,999</td>
    </tr><tr>
      <th>Cpt. Kirk</th>
      <td>00999999999</td>
      <td>Enterprise St. 22</td>
      <td>$100,000,000</td>
    </tr>
  </tbody>
</table>

HTML5 [21.04.2018 01:57:14]

#

Taulukon elementtien display-ominaisuuden muuttaminen on ongelmallista käytettävyyden kannalta, koska taulukko ei enää näy näytönlukijoille taulukkona. Tämän voi korjata lisäämällä jokaiselle display-ominaisuuden vaikuttamalle taulukon elementille sopivan role-määritteen. Esimerkiksi:

<table>
  <thead>
    <tr>
      <th role="columnheader">Name</th>
      <th role="columnheader">Phone no.</th>
      <th role="columnheader">Address</th>
      <th role="columnheader">Wealth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th role="cell">John Doe</th>
      <td role="cell">00123456789</td>
      <td role="cell">Morgue St. 21</td>
      <td role="cell">$100,000</td>
    </tr><tr>
      <th role="cell">Mary Sue</th>
      <td role="cell">00987654321</td>
      <td role="cell">Impossible St. 12</td>
      <td role="cell">$999,999,999,999,999</td>
    </tr><tr>
      <th role="cell">Cpt. Kirk</th>
      <td role="cell">00999999999</td>
      <td role="cell">Enterprise St. 22</td>
      <td role="cell">$100,000,000</td>
    </tr>
  </tbody>
</table>

Jos tr-elementtien display-ominaisuutta muutetaan, niiden rooliksi tulee laittaa row. Vastaavasti table-elementille tulee laittaa table sekä thead-, tbody- ja tfoot-elementeille rowgroup.

Lisäksi thead pitää piilottaa esim. seuraavasti, koska display: none; piilottaisi sen myös näytönlukijoilta:

thead {
   position: absolute;
   left: -9999px;
   width: 1px; /* ei saa olla 0, koska elementti menee muuten piiloon näytönlukijoilta */
   overflow: hidden;
}

CSS-spesifikaation mukaan (teksti keltaisella taustalla, ”The display property has no effect – –”) display-ominaisuuden tulee vaikuttaa vain visuaaliseen asetteluun, ei elementtien semanttisiin ominaisuuksiin. Toistaiseksi selaimet siis toimivat väärin – toivottavasti se korjataan mahdollisimman pian.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta