html - 如何在表中设置rtl?

标签 html css twitter-bootstrap

在我的 CSS 中,我使用:

body {
    font-weight: 300;
    direction: rtl;
    margin: 0;
}

我也在 html 中使用:

<body dir="rtl">

我有一个这样的表 Bootstrap 表:

<table align="center" class="table table-striped table-responsive-sm table-bordered">
  <tbody>
    <tr>
      <td style="width: 25%">کد عضویت</td>
      <td>426075</td>
    </tr>
    <tr>
      <td>نام</td>
      <td>سوسن</td>
    </tr>
  </tbody>
</table>

但是无论我使用 rtl,我所有的文章仍然是左对齐而不是右对齐。完整的源代码笔和页面 View 位于:https://codepen.io/joehark/pen/yLLeyoG

我犯了什么错误以及如何右对齐我的表格文字?我还需要class="text-justify"吗?在每个 <td> 内?如果是,那么该 rtl 设置的目的是什么?

最佳答案

direction:rtl 是不够的,因为它会影响 block 元素的对齐:

The property sets the base text direction of block-level elements and the direction of embeddings created by the unicode-bidi property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row. Unlike the dir attribute in HTML, the direction property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of rows but not inside of columns.

MDN

使用:td {text-align: right; direction: rtl;} 以便在表格的 td 上设置右对齐文本。

关于html - 如何在表中设置rtl?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58347118/

相关文章:

css - 将 CSS 应用于 <f :selectItem> nested in <h:selectOneMenu>

html - 如何使用 CSS 自动调整表单元素的宽度?

javascript - Bootstrap 按钮组,在打印时隐藏非事件按钮

css - 如何在 laravel 5.2 中覆盖 bootstrap 的 css?

html - 调整图像大小的颜色叠加(悬停)

html - 将输入字段标记为无效

javascript - 为什么此网页只能在 Internet Explorer 中运行?

javascript - 如何使用 javascript 判断一行是否包含带有文本框的单元格

html - CSS定位在元素的底部而不使用绝对

css - Bootstrap 4 : get the last card in card column