适配阿拉伯语的表格布局调整：行居右与企业信息对齐问题

要实现阿拉伯语联系人表格从页面右侧开始、企业信息与Logo正确分栏对齐的效果，你需要调整表格宽度和单元格的宽度分配，具体修改如下：

修改后的CSS代码 #

table {
  width: 100%; /* 让表格撑满整个页面宽度 */
  border-collapse: collapse; /* 消除单元格默认间距，可选 */
}

.companyInfo {
  background-color: red;
  width: 50%; /* 分配50%宽度给企业信息栏 */
  text-align: right; /* 确保阿拉伯语文本在单元格内右对齐 */
}

.companyLogo {
  background-color: yellow;
  width: 50%; /* 分配50%宽度给Logo栏 */
  text-align: left; /* 让图片在单元格内左对齐 */
}

修改后的HTML代码 #

<body>
  <table dir="rtl">
    <tr height="100px">
      <td class="companyInfo">
        اسم الشركه
      </td> 
      <td class="companyLogo">
        <img src="https://internetmarketingteam.com/wp-content/uploads/2017/05/url-web-address-300x300.png" style="max-height: 100px;" />
      </td>
    </tr>
  </table>
</body>

关键说明 #

1. 表格宽度设置：默认表格仅适配内容宽度，设置width:100%后表格会撑满页面，为分栏提供足够空间。
2. 单元格宽度分配：给两个<td>各设置50%宽度，确保企业信息栏和Logo栏各占页面一半，解决之前单元格挤在一起的问题。
3. 文本与图片对齐：阿拉伯语文本需要text-align:right保证阅读习惯，Logo栏设置text-align:left让图片靠左显示，与右侧的企业信息形成合理布局。
4. 图片高度控制：给图片添加max-height:100px避免图片超出单元格高度，可根据实际需求调整。

内容的提问来源于stack exchange，提问作者Hagar Maher