Pytanie W jaki sposób


Oto odpowiedni kod (nie działa):

<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; width: 100%; height: 100% }
</style>
</head>
<body>
<table>
  <tr>
    <td>Some column title</td>
    <td>Another column title</td>
  </tr>
  <tr>
    <td>Value 1<br>(a bit more info)</td>
    <td><label><input type="checkbox" /> &nbsp;</label></td>
  </tr>
  <tr>
    <td>Value 2</td>
    <td><input type="checkbox" /></td>
  </tr>
</table>
</body>
</html>

Powodem jest to, że chcę kliknięcie w dowolnym miejscu w komórce tabeli, aby zaznaczyć / odznaczyć pole wyboru.

edytuje: Nawiasem mówiąc, nie ma żadnych rozwiązań javascript, z powodów związanych z ułatwieniami dostępu. Próbowałem użyć display: block; ale to działa tylko dla szerokości, a nie dla wysokości


34
2018-05-15 19:36


pochodzenie


Czy próbowałeś CSS? width:100% height:100% na etykiecie... - xandercoded
@xander: Jeśli przyjrzysz się dokładnie kodowi, zobaczysz, że próbowałem już tego w nagłówku - Shawn
Jeśli niepokoi Cię dostępność, nie powinieneś formatować formularza, korzystając z układu tabeli. - Andreas Schuldhaus
@Andreas: Moje powody używania tabeli to semantyka. Rzeczywiście przedstawiam dane tabelaryczne. Co więcej, to nie ma nic wspólnego z moim pytaniem. - Shawn
Nie można wykonać z tego samego powodu, co: stackoverflow.com/questions/1122381/... - Ciro Santilli 新疆改造中心 六四事件 法轮功


Odpowiedzi:


Testowałem to tylko w IE 6, 7, 8 i FF 3.6.3.

<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
tr {
    height: 1px;
}
td {
    border: 1px solid #000;
    height: 100%;
}
label { 
    display: block; 
    border: 1px solid #f00;
    min-height: 100%; /* for the latest browsers which support min-height */
    height: auto !important; /* for newer IE versions */
    height: 100%; /* the only height-related attribute that IE6 does not ignore  */
}
</style>
</head>
<body>
<table>
    <tr>
        <td>Some column title</td>
        <td>Another column title</td>
    </tr>
    <tr>
        <td>Value 1<br>(a bit more info)</td>
        <td><label><input type="checkbox" /> &nbsp;</label></td>
    </tr>
</table>
</body>
</html>

Podstawową zasadą jest zdefiniowanie wysokości rzędów, abyśmy mogli użyć wysokości 100% na swoich dzieciach (komórkach), a na przemian 100% wzrostu na dzieciach komórek (etykiety). W ten sposób, bez względu na to, ile treści znajduje się w komórce, siłą rozszerzy ona wiersz macierzysty, a jego komórki rodzeństwa będą podążać. Ponieważ etykieta ma 100% wysokość rodzica, która ma zdefiniowaną wysokość, będzie również rozszerzać się w pionie.

Drugą i ostatnią lewą (ale równie ważną) jest użycie hacka CSS dla atrybutu min-height, jak wyjaśniono w komentarzach.

Mam nadzieję że to pomoże !


23
2018-06-21 00:08



+1 świetne rozwiązanie. - nickf
Gratulacje dla rozwiązania opartego wyłącznie na css dla różnych przeglądarek! Po prostu nie rozumiem, jak pomaga ustawienie wysokości 1px. Oczywiście, wysokość 1px jest całkowicie pomijana, gdy tylko zawartość znajdzie się w <tr>, a więc wysokość <tr> jest określana "dynamicznie", lub raczej odpowiednio do treści. Więc jaka jest różnica między tym i po prostu nie ustawieniem wysokości w <tr>? - Shawn
Sposób, w jaki zawsze zakładałem, że działało, polegał na tym, że zapewnia rzeczywistą wartość procentową wysokości procentowej dzieci <tr> do pracy, w przeciwieństwie do braku zdefiniowania w ogóle (NULL?). Zauważysz, że jak tylko to zrobisz, model przestanie działać, ponieważ wartość wysokości <td> nie ma żadnego związku z tym - tzn. 100% wartości NULL jest wciąż NULL. - Valentin Flachsel
To nie jest przeglądarka internetowa. Nie działa w Safari 5.0, Iron 5.0.380 ani Opera 9.64. - Gert Grenander
W takim razie pół-przeglądarka? :) Poważnie, ale uważam, że jedyny sposób upewnienia się, że to działa we wszystkich przeglądarkach (lub przynajmniej tak wielu, jak to tylko możliwe) oznaczałoby w pewnym stopniu użycie JS, ale też całkowicie zawieść, jeśli użytkownik ma wyłączony JS z jakiegokolwiek powodu. Podsumowując, "poprawna" odpowiedź zależy całkowicie od tego, do czego Shawn potrzebuje swojej aplikacji. - Valentin Flachsel


Etykiety są domyślnie elementami śródliniowymi, więc ustawienie szerokości i wysokości nic nie robi.

label { display: block; }

Zrobiłbym to.

(Jednak praktyka umieszczania etykiety na około pole wyboru, z którym ma być skojarzone, zamiast jawnie używać for, nie działa w IE.)


17
2018-05-15 19:39



display: blok działa na szerokość, ale nie na wysokość. Ale wielkie dzięki za to ostrzeżenie IE! Chyba mogę zawinąć element wejściowy w etykiecie I umieścić tam atrybut, prawda? - Shawn
Tak, możesz. Właściwie to właśnie sprawdziłem, to jest naprawione w IE7; tylko cierpieć będzie IE6. Możesz ustawić height na bloku, ale jeśli ustawisz procentową wysokość, element nadrzędny (do którego procent jest względny) musi mieć height określony. - bobince
Cóż, w tym przypadku element nadrzędny nie ma określonej wysokości. Więc co mam zrobić? - Shawn
Cóż, wysokość TD zależy od jego zawartości. Czy nie ma sposobu, aby CSS powiedział: "Gdy już ustalimy wymiary elementu TD, uczynić element etykiety 100% szerokości i wysokości TDs"? - Shawn
Nie, ponieważ wysokość <td>Obszar zawartości to wysokość <label>. Nie znając wysokości statycznej zawartości przepływu w komórce, nie można poznać auto wysokość komórki. - bobince


Sposób, w jaki aplikujesz etykiety, nie sprawia, że ​​elementy formularza są w pełni dostępne. Etykieta powinna zostać zastosowana do tekstu powiązanego z elementem formularza, a nie tylko do elementu formularza. Ale nie ma nic złego w dodawaniu kolejnej etykiety nad elementem formularza, aby cały obszar znajdował się wewnątrz TD możliwe do kliknięcia. Jest to pożądane, aby osoby z niepełnosprawnością ruchową miały większy obszar do kliknięcia. The <label for="whatever">Your label</label> jest przeznaczony dla osób, które używają czytników ekranu, aby przejść przez formularz internetowy.

Ponadto nie ma nic niedostępnego w używaniu JavaScriptu w celu zwiększenia dostępności. JavaScript może być używany tak długo, jak długo ulega on rozpadowi i nie zatrzymuje czytelników ekranu od czytania strony. Ponadto, nie ma sposobu, aby użyć CSS do wypełnienia wysokości komórki w starszych wersjach IE (które są nadal używane przez dużą liczbę użytkowników) bez sporego przekręcenia wyglądu strony. Powiedziawszy to, powinieneś użyć jQuery do wypełnienia całości TD. Powodem, dla którego nie mówię o JavaScript, jest to, że jQuery oszczędza Ci wielu bólów głowy, ukrywając wiele skomplikowanych kodowań, które są niezbędne, aby działało to w przeważającej większości przeglądarek.

Oto pełny dostęp do kodu obsługującego jQuery w przeglądarce:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Accessible Checkboxes</title>

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $("table > tbody tr").each(function() { // Loop through all table rows
          var Highest=0; // We want to find the highest TD... start at zero
          var ThisHeight=0; // Initiate the temporary height variable (it will hold the height as an integer)

          $($(this).children('td')).each(function() { // Loop through all the children TDs in order to find the highest
            ThisHeight=parseInt($(this).height()); // Grab the height of the current TD

            if (ThisHeight>Highest) { // Is this TD the highest?
              Highest=ThisHeight; // We got a new highest value
            }
          });

          $(this).children('td').css('height',Highest+'px');  // Set all TDs on the row to the highest TD height
        });
      });
    </script>

    <style type="text/css">
      table {
        border: 1px solid #000;
      }

      td, label { 
        height: 100%;
        min-height: 100%;
      }

      th {
        text-align: left;
      }

      td, th {
        border: 1px solid #000;
      }

      label { 
        display: block;
      }
    </style>
  </head>
  <body>
    <form action="whatever.shtml" method="post" enctype="multipart/form-data">
      <table cellspacing="3" cellpadding="0" summary="A description of what's in the table.">
        <thead>
          <tr>
            <th scope="col">Some column title</th>
            <th scope="col">Another column title</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td scope="row"><label for="value1">Value 1<br />(a bit more info)</label></td>
            <td><label><input id="value1" type="checkbox" /> &nbsp;</label></td>
          </tr>
          <tr>
            <td scope="row"><label for="value2">Value 2</label></td>
            <td><label><input id="value2" type="checkbox" /></label></td>
          </tr>
        </tbody>
      </table>
    </form>
  </body>
</html>

Musisz pobrać jQuery i umieść jquery.min.js plik pod folderem o nazwie js.

Jak widać w kodzie, formularz został w pełni udostępniony poprzez dodanie table summary, thead, th, scope, label for itd. Oczywiście, nie było to częścią tego, o co prosiłeś, ale dodałem to jako dodatkowy bonus.


4
2018-06-19 04:16



Teraz jest to misterna odpowiedź! Dziękuję bardzo! Nie wiedziałem o atrybucie zasięgu ani o atrybucie podsumowującym i masz rację co do drugiego <label> z jego atrybutem "for", oczywiście. Dla thead i tbody, miałem je już w oryginalnym kodzie (ten został przycięty dla jasności). Jestem ciekawy, jak to działa. Domyślnie wysokości <td> są ustawione tak, aby pasowały do ​​najwyższych w tym wierszu, nieprawdaż? Więc co dodaje twój skrypt? Lub czy ręczne określanie wysokości w jakiś sposób pozwala, aby <etykieta> zyskała 100% wysokości? Czy mógłbyś wyjaśnić? - Shawn
Nie ma problemu Shawn. Pracuję w środowisku, które wymaga dostępności przez około 6 lat. Uczysz się, jak idziesz. :) Co do skryptu ... Niektóre przeglądarki (kaszel TO ZNACZY kaszel) nie ustawia wysokości TD do pełnej wysokości TR kiedy jeden TD jest wyższa niż inne (s). Skrypt poprawia tę wadę. To, co robi, idzie kolejno po kolei i sprawdza, które TD jest najwyższy dla tego konkretnego wiersza. Następnie jawnie ustawia wszystkie TD wysokości dla tego wiersza do najwyższej wartości. W ten sposób LABEL komórki będą w stanie objąć pełną wysokość komórki. - Gert Grenander
Rozumiem, dzięki za wyjaśnienie. A więc byłbyś zdania, że ​​to, co próbuję osiągnąć, jest niemożliwe bez javascript? - Shawn
Tak, to niemożliwe, jeśli chcesz mieć zgodność z różnymi przeglądarkami. W tym przypadku JavaScript (jQuery) poprawi dostępność twojej strony internetowej. - Gert Grenander
Niemożliwy? Co byś powiedział o rozwiązaniu zaproponowanym przez FreekOne? Jest to tylko css. Czy to jest przeglądarka? - Shawn


Ten kod robi to, co chcesz i jest testowany na IE7 +, FF, Google Chrome, Opera i Safari:

<html>
    <head>
        <title>testing td checkboxes</title>

        <style type="text/css">
            td{border:1px solid #000;width:200px;height:200px;}
            label{display:block;border:1px solid #f00;width:198px;height:198px;}
        </style>

    </head>
    <body>

        <table>
            <tr>
                <td>Some column title</td>
                <td>Another column title</td>
            </tr>
            <tr>
                <td>Value 1<br>(a bit more info)</td>
                <td><label><input type="checkbox" /> &nbsp;</label></td>
            </tr>
            <tr>
                <td>Value 2</td>
                <td><input type="checkbox" /></td>
            </tr>
        </table>

    </body>
</html>

Jeśli twój problem nie został rozwiązany, miej nadzieję, że to rozwiązuje! ;)


1
2018-06-19 04:41



Dzięki, ale nie mogę zagwarantować, że moja zawartość zawsze będzie pasować do 200 na 200 pikseli i na pewno nie chcę, aby pojawiały się paski przewijania. - Shawn
szerokość i wysokość, które umieściłem dla celów demonstracyjnych! Można go zmienić, aby pasował do Twoich potrzeb ... celem jest powiedzenie, że szerokość i wysokość muszą być ustawione, a to, co chcesz, nie działa! - Zuul
Rozumiem. Niestety, ze względu na dynamiczny charakter treści, nie mogę z góry wiedzieć, jaki rozmiar komórki jest potrzebny do zawartości. - Shawn


Ta odpowiedź jest nieco "tam" - dla poprawności kodu HTML trzeba zdefiniować własny DTD, a w każdym razie nie działa on w IE lub Operze (działa w Firefoksie). Więc nie jest to realistyczne rozwiązanie, ale pomyślałem, że mimo to udostępnię tylko dla zainteresowania:

HTML:

<table>
    <tr>
        <td>Some content</td>
        <label><input type="checkbox" /></label> <!-- no TD -->
    </tr>
    <tr>
        <td>Some<br />multi-line<br />content</td>
        <label><input type="checkbox" /></label>
    </tr>
</table>

CSS:

label { display: table-cell; }

1
2018-06-21 01:04



Ciekawy. Nie wiem jeszcze wystarczająco dużo o niestandardowych DTD (zamierzam się tego nauczyć jednego dnia), aby w pełni zrozumieć to rozwiązanie, ale jest to podejście, o którym jeszcze nie myślałem (ani nie widziałem). Dzięki za udostępnienie! - Shawn
Nawet jeśli zaimplementujesz zupełnie nowy DTD, wsparcie dla table-cell; jest ograniczony i najprawdopodobniej wystąpią problemy z dostępnością, ponieważ czytniki ekranu mogą mieć problemy z przetwarzaniem w rozsądny sposób. - Gert Grenander
@Gert, W teorii czytniki ekranu powinny sprawdzać styl elementu określającego, jak sobie z nim radzić, a nie Nazwa. Ale tak, masz rację: jak powiedziałem, to naprawdę nie jest opłacalne, biorąc pod uwagę słabą obsługę różnych przeglądarek. - nickf
@nickf - Gdzie nauczyłeś się tej teorii? - Gert Grenander
@ Gert, lol. W3C, jak sądzę. - nickf


Nie stwierdziłem, że inne odpowiedzi działały w obecnych przeglądarkach (2017), ale absolutnie pozycjonowanie etykiety działało dla mnie:

https://jsfiddle.net/4w75260j/5/

<html>
<head>
    <style type="text/css">            
        td.checkbox {
            position: relative;
        }
        td.checkbox label {
            /* Take up full width/height */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

            /* Ensure the checkbox is centered */
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>Checkboxes</td>
            <td>Text</td>
        </tr>
        <tr>
            <td class="checkbox"><label><input type="checkbox" /></label></td>
            <td>Lorem ipsum dolor sit amet...</td>
        </tr>
    </table>
</body>
</html>

Zauważ, że to rozwiązanie wykorzystuje Flexbox, aby wyśrodkować pole wyboru; jeśli kierujesz reklamy na starsze przeglądarki, możesz spróbować przekształć styl centrowania.


1
2018-02-04 21:17





Chcę kliknięcie w dowolnym miejscu w komórce tabeli

<tr onclick="alert('process click here');"> ... </tr>

0
2018-05-15 19:42



Powinienem dodać: "bez javascript z powodów związanych z ułatwieniami dostępu", ale dzięki to i tak :) - Shawn
więc dlaczego nie grać z tr: hover ?? - balexandre
Interesujące, ale czy CSS może zaznaczyć i odznaczyć pola wyboru? tr: hover {zaznacz / odznacz pole checkbox} - Shawn
Właściwie, czy mógłbyś wyjaśnić, co masz na myśli mówiąc "grając z tr: hover"? - Shawn


Wypróbuj ten CSS dla swojej etykiety

label  {
 border:1px solid #FF0000;
 display:block;
 height:35px;
}

Oto demonstracja na żywo http://jsbin.com/ehoke3/2/


0
2018-05-15 20:57



Co jeśli ta komórka w środku lewej kolumny ma inną linię tekstu? A co, jeśli później zdecyduję się zmienić rozmiar tekstu? To rozwiązanie nie jest idealne, ponieważ nie zawsze mogę znać dokładną wysokość komórek. - Shawn
Masz dwie opcje albo użyć wbudowanych stylów, albo naprawdę powinieneś używać JavaScript - mam na myśli dlaczego nie? - Pablo
Naprawdę nie rozumiem, jak pomoże mi styl inline. Nadal nie mogę określić dokładnej wielkości piksela TD w czasie, gdy piszę kod, a może on z czasem ulec zmianie. A jeśli chodzi o javascript, jeśli wszystko inne zawiedzie, nie mam nic przeciwko, ale nadal uważam, że powinienem spróbować dla tych, którzy go nie mają (z różnych powodów) - Shawn
OK, niestety rzeczy nie działają tak, jak tego oczekujemy lub tego oczekujemy. Powodzenia - Pablo


W swoim wierszu z wartością "Wartość 1" nie masz po prostu "trochę więcej informacji", ale zawierasz również przerwę. Wydaje mi się, że wszystko, co naprawdę musisz zrobić, to dołączyć <br> w dowolnej etykiecie w prawej kolumnie, gdy zawartość w lewej kolumnie zawiera <br>. Oczywiście <label> musi mieć display Atrybut CSS ustawiony na block.

<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; display: block;}
</style>
</head>
<body>
<table>
<tr><td>Some column title</td><td>Another column title</td></tr>
<tr><td>Value 1<br>(a bit more info)</td><td><label><input type="checkbox" /> &nbsp;<br>&nbsp;</label></td></tr>
<tr><td>Value 2</td><td><label><input type="checkbox" /></label></td></tr>
</table>
</body>
</html>

Jedna uwaga: nie osiągniesz doskonałej wydajności we wszystkich najważniejszych przeglądarkach od 10 lat - kaszlesz IE6 - bez uciekania się do takich rzeczy jak JavaScript. Uważam, że moje rozwiązanie jest najlepszym rozwiązaniem bez uciekania się do JavaScript.


0
2018-06-18 14:03



Więcej informacji na temat błędu domyślnej etykiety IE6: evotech.net/blog/2009/09/ie6ie7-implicit-label-bug - artlung
Właśnie dodałem gwiazdkę, aby zawartość wykorzystała dwie linie. Istnieją inne sposoby wykorzystania zawartości dwóch (lub więcej) linii, takich jak bardzo długi ciąg tekstu, który musi się podzielić na dwie linie, aby zmieścić się na ekranie. Oznacza to, że po prostu liczenie <br> i dodawanie tej samej kwoty w prawej kolumnie nie zawsze działa. Ale bardzo dziękuję za próbowanie. - Shawn


Rozwiązanie poniżej:

  • ma <label> który całkowicie wypełnia <td> wysokość
  • obsługuje dowolną wysokość komórki (tj. nie ma stałej wysokości w pikselach)
  • działa tylko na CSS (tzn. bez JavaScript)
  • jest multibrowser (MSIE 7/8/9/10/11, Firefox 42, Chrome 46, Seamonkey 2.39, Opera 33, Safari 5.1.7)

<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; display:block; min-height:2.3em;}
</style>
</head>
<body>
<table style="table-layout:fixed">
  <tr>
    <td>Some column title</td>
    <td>Another column title</td>
  </tr>
  <tr>
    <td>Value 1<br>(a bit more info)</td>
    <td><label><input type="checkbox" style="vertical-align:-50%" />&nbsp;</label></td>
  </tr>
  <tr>
    <td>Value 2</td>
    <td><input type="checkbox" /></td>
  </tr>
</table>
</body>
</html>

Objaśnienia:

  • display:block sprawia, że <label> wziąć <td> pełna szerokość
  • min-height:2.3em; sprawia, że <label> wziąć <td> pełna wysokość (minimalna wysokość nieco wyższa niż dwie linie, ponieważ w pierwszej komórce wiersza znajdują się dwie linie, może być konieczne zwiększenie, np. w kodzie użyłem wersji 3.3em)
  • vertical-align:-50% powoduje, że pole wyboru jest wyrównane pionowo w środku komórki (jest to wymagane tylko wtedy, gdy zawartość komórki obejmuje mniej linii niż pierwsza komórka w rzędzie)

0
2017-11-16 23:05