Question

我想从右到左呈现整个表格：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<head>
    <style type="text/css">
    table.myTable {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
        direction:rtl;
    }
    table.myTable th {
        direction:rtl;
        padding: 0px;
        background: #d5e3e4;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q1ZTNlNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2NjZGVlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiM2M4Y2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,  #d5e3e4 0%, #ccdee0 40%, #b3c8cc 100%);
        background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,#d5e3e4), color-stop(40%,#ccdee0), color-stop(100%,#b3c8cc));
        background: -webkit-linear-gradient(top,  #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%);
        background: -o-linear-gradient(top,  #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%);
        background: -ms-linear-gradient(top,  #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%);
        background: linear-gradient(to bottom,  #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%);
        border: 1px solid #999999;
    }
    table.myTable td {
        direction:rtl;
        padding: 0px;
        background: #ebecda;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWNkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2UwZTBjNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZWNlYjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,  #ebecda 0%, #e0e0c6 40%, #ceceb7 100%);
        background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,#ebecda), color-stop(40%,#e0e0c6), color-stop(100%,#ceceb7));
        background: -webkit-linear-gradient(top,  #ebecda 0%,#e0e0c6 40%,#ceceb7 100%);
        background: -o-linear-gradient(top,  #ebecda 0%,#e0e0c6 40%,#ceceb7 100%);
        background: -ms-linear-gradient(top,  #ebecda 0%,#e0e0c6 40%,#ceceb7 100%);
        background: linear-gradient(to bottom,  #ebecda 0%,#e0e0c6 40%,#ceceb7 100%);
        border: 1px solid #999999;
    }
    table.myTable th p{
    direction:rtl;
        margin:0px;
        padding:8px;
        border-top: 1px solid #eefafc;
        border-bottom:0px;
        border-right: 1px solid #eefafc;
        border-right:0px;
    }
    table.myTable td p{
    direction:rtl;
        margin:0px;
        padding:8px;
        border-top: 1px solid #fcfdec;
        border-bottom:0px;
        border-right: 1px solid #fcfdec;;
        border-right:0px;
    }
    </style>

</head>


<table class="myTable" dir="rtl">
<tr dir="rtl">
    <th><p>Client's Number</p></th>
    <th><p>Client's First Name</p></th>
    <th><p>Client's Last name</p></th>
    <th><p>Client's phone</p></th>
</tr>
<tr>
    <td><p>098098</p></td>
    <td><p>Jack</p></td>
    <td><p>Rayback</p></td>
    <td><p>04344443465</p></td>
</tr>
</table>

但即使我使用direction:rtl;（在css中）和dir="rtl"（在html中），表格仍在从左到右呈现。

知道什么是错的吗？

演示：

enter image description here

Answer 1

你可以使用float或text-align来完成它。浮动使用：

float：left;明确：右;

用于文本对齐：

文本对齐：左;

Answer 2

DEMO FIDDLE

<强> HTML

<table class="myTable">
<tr dir="rtl">
    <th><p>Client's Number</p></th>
    <th><p>Client's First Name</p></th>
    <th><p>Client's Last name</p></th>
    <th><p>Client's phone</p></th>
</tr>
<tr>
    <td><p>098098</p></td>
    <td><p>Jack</p></td>
    <td><p>Rayback</p></td>
    <td><p>04344443465</p></td>
</tr>
</table>

<强> CSS

 table.myTable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
}

我只是删除方向：来自上面的css和dir属性的rtl。如果你想要文本对齐意味着只需为“table.myTable th”和“table.myTable td p”css添加text-align左边

Answer 3

  table.myTable {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
        direction:rtl;
       float:right; (Add this line)
    }

从右到左的CSS＆amp; Html不起作用

3 个答案: