Question

抱歉愚蠢的问题。我是css的新手。我有以下UI：

我有以下代码：

<div class="row centered-form center-block">
                <div class="container col-md-10 col-md-offset-1">
                    <table class="table">
                        <tr>
                            <td>
                                <h4><span class="label label-default">Hello</span></h4>
                            </td>
                            <td>
                                <h4><span class="label label-success">World</span></h4>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h4><span class="label label-default">Hello Hello</span></h4>
                            </td>
                            <td>
                                <h4><span class="label label-success">World World</span></h4>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h4><span class="label label-default">Hello Hello Hello</span></h4>
                            </td>
                            <td>
                                <h4><span class="label label-success">World World World</span></h4>
                            </td>
                        </tr>
                    </table>

                    <br/>

                    <div class="row centered-form center-block">
                        <div class="container col-md-10 col-md-offset-1">
                            <div class="form-inline">
                                <div class="form-group" style="width: 40%;">
                                    <button class="btn btn-default">
                                        Hello
                                    </button>
                                </div>
                                <div class="form-group" style="width: 40%;">
                                    <button class="btn btn-default">
                                        World
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

我尝试了不同的方法并没有成功。我一直遇到问题。请告诉我管理CSS中对齐的有效方法。我希望按绿线对齐所有内容，因此左列为right-aligned，右列为left-aligned。

Answer 1

我同意Pete的意见，即表格不应用于布局，但如果继续，则可以使用以下样式：

table {
  width: 100%;
}
td:nth-child(odd) { /* every first column in the 2 column table */
  padding-right: 50px;  /* this is for that gap down the middle */
  text-align: right; /* align the column to the right */
}
td:nth-child(even) { /* every second column in the 2 column table */
  padding-left: 50px; /* this is for that gap down the middle */
  text-align: left; /* align the column to the left */
}
td {
  width: 50%; /* equal width columns */
  box-sizing: border-box;
}

<table class="table">
  <tr>
    <td>
      <h4><span class="label label-default">Hello</span></h4>
    </td>
    <td>
      <h4><span class="label label-success">World</span></h4>
    </td>
  </tr>
  <tr>
    <td>
      <h4><span class="label label-default">Hello Hello</span></h4>
    </td>
    <td>
      <h4><span class="label label-success">World World</span></h4>
    </td>
  </tr>
  <tr>
    <td>
      <h4><span class="label label-default">Hello Hello Hello</span></h4>
    </td>
    <td>
      <h4><span class="label label-success">World World World</span></h4>
    </td>
  </tr>
</table>

Answer 2

这是一个简单的解决方案，可以有效地对齐适合我的表中的列。需要Jquery和bootstrap ......

将此脚本放在页面底部：

<script>
    for (i = 0; i < 10; i++) {
    $(".col" + i + "r th:nth-of-type(" + i + ")").addClass("text-right");
    $(".col" + i + "r td:nth-of-type(" + i + ")").addClass("text-right");
    $(".col" + i + "c th:nth-of-type(" + i + ")").addClass("text-center");
    $(".col" + i + "c td:nth-of-type(" + i + ")").addClass("text-center");
    }
</script>

使用以下语法在表标记中指定类：

“栏” + colnumber +对准

例如。 col2r =第2列右对齐（第1列是左列）

例如。 col3c =第3列中心对齐

左对齐是默认对齐，因此无需在此处覆盖此对齐。

例如。

class =“table col2r col3c” 要么 class =“table col2c col3r”

注意：这里包含了。 10是列数..相应调整。

这是一个小提琴： https://jsfiddle.net/kcwbhczy/

CSS：对齐表格中的列

2 个答案: