Source

טישן

דאַקיומענטיישאַן און ביישפילן פֿאַר אַפּט-אין סטילינג פון טישן (געגעבן זייער פאַרשפּרייט נוצן אין דזשאַוואַסקריפּט פּלוגינס) מיט Bootstrap.

ביישפילן

רעכט צו דער וויידספּרעד נוצן פון טישן אַריבער דריט-פּאַרטיי ווידזשיץ ווי קאַלענדאַרס און דאַטע פּיקערז, מיר האָבן דיזיינד אונדזער טישן צו זיין אַפּט-אין . נאָר לייגן די באַזע קלאַס .tableצו קיין <table>, און פאַרברייטערן מיט מנהג סטיילז אָדער אונדזער פאַרשידן ינקלודעד מאָדיפיער קלאסן.

ניצן די מערסט יקערדיק טיש מאַרקאַפּ, דאָ ס ווי- .tableבאזירט טישן קוק אין Bootstrap. כל טיש סטיילז זענען ינכעראַטיד אין Bootstrap 4 , וואָס מיטל אַז קיין נעסטעד טישן וועט זיין סטיילד אויף דער זעלביקער שטייגער ווי דער פאָטער.

# ערשטער לעצטע שעפּן
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די פויגל @טוויטער 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

איר קענען אויך יבערקערן די פארבן - מיט ליכט טעקסט אויף טונקל באַקגראַונדז - מיט .table-dark.

# ערשטער לעצטע שעפּן
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די פויגל @טוויטער 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

טיש קאָפּ אָפּציעס

ענלעך צו טישן און פינצטער טישן, נוצן די מאָדיפיער קלאסן .thead-lightאָדער .thead-darkצו מאַכן <thead>עס דערשייַנען ליכט אָדער טונקל גרוי.

# ערשטער לעצטע שעפּן
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די פויגל @טוויטער
# ערשטער לעצטע שעפּן
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די פויגל @טוויטער 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

סטרייפּט ראָוז

ניצן .table-stripedצו לייגן זעבראַ-סטריפּינג צו קיין טיש רודערן אין די <tbody>.

# ערשטער לעצטע שעפּן
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די פויגל @טוויטער 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ערשטער לעצטע שעפּן
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די פויגל @טוויטער 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

באָרדערד טיש

לייג .table-borderedפֿאַר געמארקן אויף אַלע זייטן פון די טיש און סעלז.

# ערשטער לעצטע שעפּן
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די בירד @טוויטער 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ערשטער לעצטע שעפּן
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די בירד @טוויטער 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

האָוועראַבלע ראָוז

לייג .table-hoverצו געבן אַ האָווער שטאַט אויף טיש ראָוז אין אַ <tbody>.

# ערשטער לעצטע שעפּן
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די בירד @טוויטער 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ערשטער לעצטע שעפּן
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די בירד @טוויטער 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

קליין טיש

לייג .table-smצו מאַכן טישן מער סאָליד דורך קאַטינג צעל וואַטן אין האַלב.

# ערשטער לעצטע שעפּן
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די בירד @טוויטער 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ערשטער לעצטע שעפּן
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די בירד @טוויטער 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

קאָנטעקסטואַל קלאסן

ניצן קאָנטעקסטואַל קלאסן צו קאָלירן טיש ראָוז אָדער יחיד סעלז.

קלאַס כעדינג כעדינג
אַקטיוו צעל צעל
פעליקייַט צעל צעל
ערשטיק צעל צעל
צווייטיק צעל צעל
הצלחה צעל צעל
געפאַר צעל צעל
ווארענונג צעל צעל
אינפֿאָרמאַציע צעל צעל
ליכט צעל צעל
טונקל צעל צעל 
<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

רעגולער טיש הינטערגרונט וועריאַנץ זענען נישט בנימצא מיט די טונקל טיש, אָבער, איר קען נוצן טעקסט אָדער הינטערגרונט יוטילאַטיז צו דערגרייכן ענלעך סטיילז.

# כעדינג כעדינג
1 צעל צעל
2 צעל צעל
3 צעל צעל
4 צעל צעל
5 צעל צעל
6 צעל צעל
7 צעל צעל
8 צעל צעל
9 צעל צעל 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
קאַנווייינג טייַטש צו אַסיסטיוו טעקנאַלאַדזשיז

ניצן קאָליר צו לייגן טייַטש בלויז גיט אַ וויזשאַוואַל אָנווייַז, וואָס וועט נישט זיין קאַנווייד צו יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז - אַזאַ ווי פאַרשטעלן לייענער. פאַרזיכערן אַז אינפֿאָרמאַציע דינאָוטיד דורך די קאָליר איז קלאָר ווי דער טאָג פון די אינהאַלט זיך (למשל די קענטיק טעקסט), אָדער איז אַרייַנגערעכנט דורך אָלטערנאַטיוו מיטל, אַזאַ ווי נאָך טעקסט פאַרבאָרגן מיט די .sr-onlyקלאַס.

שאַפֿן אָפּרופיק טישן דורך ראַפּינג קיין .tableמיט .table-responsive{-sm|-md|-lg|-xl}, מאכן די טיש מעגילע כאָריזאַנטאַלי ביי יעדער max-widthברייקפּוינט פון אַרויף צו (אָבער ניט אַרייַנגערעכנט) 576 פּקס, 768 פּקס, 992 פּקס, און 1120 פּקס, ריספּעקטיוולי.

באַמערקונג אַז זינט בראַוזערז טאָן ניט דערווייַל שטיצן קייט קאָנטעקסט פֿראגן , מיר אַרבעטן אַרום די לימיטיישאַנז פון min-און max-פּרעפיקס און וויופּאָרט מיט פראַקשאַנאַל ברייט (וואָס קענען פּאַסירן אונטער זיכער טנאָים אויף הויך-דפּי דעוויסעס, למשל) דורך ניצן וואַלועס מיט העכער פּינטלעכקייַט פֿאַר די קאַמפּעראַסאַנז .

קאַפּשאַנז

א <caption>פאַנגקשאַנז ווי אַ כעדינג פֿאַר אַ טיש. עס העלפּס ניצערס מיט פאַרשטעלן לייענער צו געפֿינען אַ טיש און פֿאַרשטיין וואָס עס איז וועגן און באַשליסן אויב זיי ווילן צו לייענען עס.

רשימה פון ניצערס
# ערשטער לעצטע שעפּן
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די פויגל @טוויטער 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

אָפּרופיק טישן

אָפּרופיק טישן לאָזן טישן צו זיין סראָולינג כאָריזאַנטאַלי מיט יז. מאַכן קיין טיש אָפּרופיק איבער אַלע וויופּאָרץ דורך ראַפּינג אַ .tableמיט .table-responsive. אָדער, קלייַבן אַ מאַקסימום ברייקפּוינט מיט וואָס צו האָבן אַ אָפּרופיק טיש דורך ניצן .table-responsive{-sm|-md|-lg|-xl}.

ווערטיקאַל קליפּינג / טראַנגקיישאַן

אָפּרופיק טישן נוצן overflow-y: hidden, וואָס קליפּס אַוועק קיין אינהאַלט וואָס גייט ווייַטער פון די דנאָ אָדער שפּיץ עדזשאַז פון די טיש. אין באַזונדער, דאָס קענען ויסשליסן דראָפּדאָוון מעניוז און אנדערע דריט-פּאַרטיי ווידזשיץ.

שטענדיק אָפּרופיק

איבער יעדער ברייקפּוינט, נוצן .table-responsiveפֿאַר כאָריזאַנטאַלי סקראָללינג טישן.

# כעדינג כעדינג כעדינג כעדינג כעדינג כעדינג כעדינג כעדינג כעדינג
1 צעל צעל צעל צעל צעל צעל צעל צעל צעל
2 צעל צעל צעל צעל צעל צעל צעל צעל צעל
3 צעל צעל צעל צעל צעל צעל צעל צעל צעל 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ברעאַקפּאָינט ספּעציפיש

ניצן .table-responsive{-sm|-md|-lg|-xl}ווי דארף צו שאַפֿן אָפּרופיק טישן אַרויף צו אַ באַזונדער ברייקפּוינט. פֿון דעם ברייקפּוינט און העכער, די טיש וועט זיין נאָרמאַלי און נישט מעגילע כאָריזאַנטאַלי.

# כעדינג כעדינג כעדינג כעדינג כעדינג
1 צעל צעל צעל צעל צעל
2 צעל צעל צעל צעל צעל
3 צעל צעל צעל צעל צעל
# כעדינג כעדינג כעדינג כעדינג כעדינג
1 צעל צעל צעל צעל צעל
2 צעל צעל צעל צעל צעל
3 צעל צעל צעל צעל צעל
# כעדינג כעדינג כעדינג כעדינג כעדינג
1 צעל צעל צעל צעל צעל
2 צעל צעל צעל צעל צעל
3 צעל צעל צעל צעל צעל
# כעדינג כעדינג כעדינג כעדינג כעדינג
1 צעל צעל צעל צעל צעל
2 צעל צעל צעל צעל צעל
3 צעל צעל צעל צעל צעל 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>