HTML仅将焦点指向页面的一部分

Question

我试图只给出html不同焦点方向的一部分- 我在RTL中的整个页面-希伯来语 和即时通讯建立一个时间线，即时通讯时必须从LTR开始 但它改为RTL。 因为该网站是为残疾人士打造的，所以使用键盘TAB的选项必须符合他们的逻辑要求。

对我来说，它像这样启动RTL：

我尝试了tabindex，但这意味着我需要将其提供给页面的每个部分 （所有元素的tabindex都超过100）。 我在表中尝试了dir = ltr-什么都没有。 我需要它从1907年开始LTR。 有什么想法吗？

#historyLine td {
  display: inline-block;
  font-size: 25px;
  float: right;
  margin: -17px;
  margin-left: 10px;
}

<table dir="ltr">
  <tr id="historyLine">
    <td id="year2018"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="bottom" role="button" data-toggle="popover" data-trigger="focus" title="שנת 2018" data-content="מאז 'פוקימון' ועד היום האנימה ממשיכה לצבור פופולאריות בכל העולם וגם בישראל. עד היום יצאו מעל ל35,000  סדרות אנימה! ">2018</a>
      <td id="year1999"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="top" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1999" data-content="‘פוקימון'! הדבר הראשון שצץ לראש זה היצורים החמודים האלה! הסדרה הזו צברה פופולאריות והפכה למשחק קלפים משחק מחשב ועוד. היא פרצה את הדרך לאנימות בחו‘’ל ובעיקר באמריקה. ">1999</a></td>
      <td id="year1974"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="bottom" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1974" data-content="‘ספינת החלל יאמוטו' - זוהי סדרת אנימה האופרה הראשונה מסוגה. הסדרה נוצרה בהשראת הצלחת סדרת סרטי מלחמת הכוכבים.">1974</a></td>
      <td id="year1961"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="top" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1961" data-content=" 'היסטוריה מיידית' – זהו שמה של האנימה הראשונה ששודרה ביפן. כמו השם שלה, הסדרה לימדה ילדים על היסטוריה. ">1961</a></td>
      <td id="year1946"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="bottom" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1946" data-content="אוסמו טזוקה בן ה17 יצר את האנימה היפנית הראשונה אי פעם. לאנימה קוראים 'יומנו של מא-צ'אן'.">1946</a></td>
      <td id="year1907"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="top" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1907" data-content="האנימציה הראשונה בעולם נוצרה! היא ארכה רק 3 שניות בהן מלח מוריד את הכובע שלו.">1907</a></td>
  </tr>
</table>

Answer 1

看起来您搞砸了LTR，RTL，float：right和默认文档流程... 请按以下方式播放，我相信它可以满足您的要求。

body {
  direction: rtl
}

table {
  direction: ltr
}

#historyLine td {
  direction: rtl;
  font-size: 25px;
  padding: 0 15px;
}

[data-toggle=popover] {
  position: relative
}

[data-toggle=popover]:focus::after {
  content: attr(data-content);
  position: absolute;
  top: 25px;
  left: 25px;
  width: 100px;
  font-size: 10px;
  background: pink;
}

<table>
  <tr id="historyLine">
    <td id="year1907"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="top" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1907" data-content="האנימציה הראשונה בעולם נוצרה! היא ארכה רק 3 שניות בהן מלח מוריד את הכובע שלו.">1907</a></td>
    <td id="year1946"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="bottom" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1946" data-content="אוסמו טזוקה בן ה17 יצר את האנימה היפנית הראשונה אי פעם. לאנימה קוראים 'יומנו של מא-צ'אן'.">1946</a></td>
    <td id="year1961"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="top" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1961" data-content=" 'היסטוריה מיידית' – זהו שמה של האנימה הראשונה ששודרה ביפן. כמו השם שלה, הסדרה לימדה ילדים על היסטוריה. ">1961</a></td>
    <td id="year1974"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="bottom" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1974" data-content="‘ספינת החלל יאמוטו' - זוהי סדרת אנימה האופרה הראשונה מסוגה. הסדרה נוצרה בהשראת הצלחת סדרת סרטי מלחמת הכוכבים.">1974</a></td>
    <td id="year1999"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="top" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1999" data-content="‘פוקימון'! הדבר הראשון שצץ לראש זה היצורים החמודים האלה! הסדרה הזו צברה פופולאריות והפכה למשחק קלפים משחק מחשב ועוד. היא פרצה את הדרך לאנימות בחו‘’ל ובעיקר באמריקה. ">1999</a></td>
    <td id="year2018"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="bottom" role="button" data-toggle="popover" data-trigger="focus" title="שנת 2018" data-content="מאז 'פוקימון' ועד היום האנימה ממשיכה לצבור פופולאריות בכל העולם וגם בישראל. עד היום יצאו מעל ל35,000  סדרות אנימה! ">2018</a></td>
  </tr>
</table>