在 Div 中对齐 Jquery 的数据表

Question

我在对齐 div 内的数据 table 时遇到问题。我有一个 div 定义为屏幕的 50%，我想将整个数据 table 放在 div 的右侧。请参考下面的 ascii 作为我想要的说明。

__________________________
|  _________________      |
| |                |      |
| |                |      |
| |   This is a    |      |
| |   datatable    |      |
| |                |      |
| |                |      |
| |                |      |
| |                |      |
| |________________|      |
|    This is a div        |
__________________________|

__________________________
|       _________________ |
|      |                | |
|      |                | |
|      |   This is a    | |
|      |   datatable    | |
|      |                | |
|      |                | |
|      |                | |
|      |                | |
|      |________________| |
|    This is a div        |
__________________________|

我试过 text-align: right，但这导致数据 table 中的信息被重新对齐，而不是整个 table。任何帮助表示赞赏。

Answer 1

带浮动

可能最简单但我最不喜欢的方法就是将 float: right; 应用到您的 table。这将导致它一直浮动到容器的边缘（注意填充），并充当内联元素。

第二部分很重要，因为在 table.

之外的附近文本可能会产生一些不寻常的结果

也就是说，正如 hungstar 指出的那样，使用基本的 clearfix 将解决 float 的大部分问题。

带内联块

我的首选方法是为您的 table 使用 display: inline-block css 属性。您基本上可以这样做：

<div id="Container">
    <table> <!-- or div with table styles -->
        ...

CSS:

#Container
{
    text-align: right; /* this effects the actual table */
}

#Container table
{
    display: inline-block;
    width: auto;
    text-align: left; /* to reset table text */
}

非常简单，此模式强制 table 充当内联（文本式）元素，因此我们可以对其应用 text-align 属性。包装 #Container div 只是为了防止它干扰附近的其他元素。

为什么这是首选？

根据我的经验，

float 有时会打乱 DOM 的顺序，并在更复杂的安排下产生意想不到的结果。这是一种完全有效的方法，但我更喜欢 inline-block 因为它更符合预测 table.

然而，inline-block 也并非完美无缺。对于水平对齐，多个 div 与 inline-block 之间将有一个小的 space（文字 space，由浏览器将元素视为文本字符引起）。

在 Div 中对齐 Jquery 的数据表

Align a Datatable for Jquery in a Div

html

css

datatable

jquery