使左对齐的表居中

时间:2016-09-08 11:07:21

标签: html css alignment html-table

我有以下表格 http://i.imgur.com/00gTfJy.png

有一个像这样的数组

Array
(
[0] => Name
[1] => Status
[2] => Name
[3] => Status
....

并使用以下代码

$i = 0;
$counter = 1;
$split = 0;
foreach ($array as $i => $value) {
if($split >= 10) {
    echo "<br /><br /><br /><br />";
    $split = 0;
}
if(++$counter % 2 === 0) {
    echo "<table style='float: left'>";
    echo "<tr><td class='value'>Name</td></tr>";
} else {
    echo "<tr><td class='value'>Status</td></tr>";
    $change = 'Error';
    if (isset($_SESSION['old_value'][$i])) {
    $change = ($value - $_SESSION['old_value'][$i]);
        if ($change >= 10) {
            echo "<tr><td class='update'>".$change."</td></tr>";
            echo "</table>";
            $split++;
        } else {
            echo "<tr><td class='value'>".$change."</td></tr>";
            echo "</table>";
            $split++;
        }
    } else {
        echo "<td class='value'>0</td>";
    }
    $_SESSION['old_value'][$i] = $value;
}
}

我的问题是如何在不破坏10x7网格的情况下使整个表格(在图像中)对齐页面中心?到目前为止,我尝试了一些css来调整它并没有运气。

2 个答案:

答案 0 :(得分:0)

class FooResponse{}
class First{}
class Second{}

public interface DtoMapper<T> {
    FooResponse convertToFooResponse(final List<T> rewards);    
}

class FirstMapper implements DtoMapper<First> {
    @Override
    public FooResponse convertToFooResponse(List<First> list) {
        return null;
    }
}

class SecondMapper implements DtoMapper<Second> {
    @Override
    public FooResponse convertToFooResponse(List<Second> list) {
        return null;
    }
}

答案 1 :(得分:0)

为表格提供margin: 0 auto的属性。 10x7网格将不受影响。

修改

考虑到原始问题使用多个表而不是一个大表,我编辑了下面的内容以支持集中在容器div内的所有表。

&#13;
&#13;
body { width: 100% }
table, tr, td { border: 1px solid black; }

.centered-table { display: inline-block; }
.container      { text-align: center; }
&#13;
<div class="container">
<div class="centered-table">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </table>
</div>
</div>
&#13;
&#13;
&#13;