Question

我遇到的问题是将美元金额（第2,3,4,5列和第6列）与其指定的数据标签对齐（在第一列中支付总额和额外费用）。此外，我正在使用Bootstrap 3，在移动视图上支付总额和额外将叠加在利率之下。美元金额也应与正确的标签对齐。这可以用我现有的结构来完成吗？或者我必须以不同的方式重新组织它。 Here是codepen：

td,
th {
  border: solid;
}
table {
  table-layout: fixed;
  width: 100%; 
}

th:nth-child(1) {
  width: 31%;
}
th:nth-child(2),
th:nth-child(3),
th:nth-child(4),
th:nth-child(5),
th:nth-child(6) {
  width: 10%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

        <div class="container">
    <table>
      <thead>
        <th>Testing 0</th>
        <th>
          <input type="radio" name="allocation" value="highestInterestRate">
          <br> Testing <br> 1
        </th>
        <th>
          <input type="radio" name="allocation" value="highestCurrentBalance">
          <br> Testing <br> # <br> 2
        </th>
        <th>
          <input type="radio" name="allocation" value="lowestCurrentBalance">
          <br> Testing <br> 3
        </th>
        <th>
          <input type="radio" name="allocation" value="prorate">
          <br> Testing <br> # <br> # <br> 4
        </th>
        <th>
          <input type="radio" name="allocation" value="unsubsidizedLoans">
          <br> Testing <br> 5
        </th>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="row">
              <div class="col-xs-12 col-md-7">
                <p class="payment-loan-name"><strong>#1</strong> Hello this is name 1</p>
                <p>Current Balance $ 2,000.00</p>
                <p>Interest Rate 1.99%</p>
              </div>
              <div class="col-xs-12 col-md-5">
                <p>Pay total</p>
                <p>Extra</p>
              </div>
            </div>
          </td>
          <td>
              <div class="row">
                <div class="col-xs-12">
                  <p>$ 200.00</p>
                </div>
              </div>
          </td>
          <td>
            <div class="row">
              <div class="col-xs-12">
                <p>$ 200.00</p>
                <p>$ 100.00</p>
              </div>
            </div>
          </td>
          <td>
            <div class="row">
              <div class="col-xs-12">
                <p>$ 200.00
              </div>
            </div>
          </td>
          <td>
            <div class="row">
              <div class="col-xs-12">
                <p>$ 200.00</p>
                <p>$ 33.33</p>
              </div>
            </div>
          </td>
          <td>
            <div class="row">
              <div class="col-xs-12">
                <p>$ 200.00</p>
                <p>$ 50.00</p>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="row">
              <div class="col-xs-12 col-md-7">
                <p class="payment-loan-name"><strong>#2</strong> Hello this is name 2 and this is going to be in two lines</p>
                <p>Current Balance $ 2,000.00</p>
                <p>Interest Rate 1.99%</p>
              </div>
              <div class="col-xs-12 col-md-5">
                <p>Pay total</p>
                <p>Extra</p>
              </div>
            </div>
          </td>
          <td>
            <div class="row">
              <div class="col-xs-12">
                $ 100.00
              </div>
            </div>
          </td>
          <td>
            <div class="row">
              <div class="col-xs-12">
                <p>$ 100.00</p>
              </div>
            </div>
          </td>
          <td>
            <div class="row">
              <div class="col-xs-12">
                $ 100.00
              </div>
            </div>
          </td>
          <td>
            <div class="row">
              <div class="col-xs-12">
                <p>$ 100.00</p>
                <p>$ 50.00</p>
              </div>
            </div>
          </td>
          <td>
            <div class="row">
              <div class="col-xs-12">
                <p>$ 300.00</p>
                <p>$ 50.00</p>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    </div>

Answer 1

我已经在我自己的Codepen

中重新创建了这个

我用简单的div重构了它，没有使用CSS Grid的bootstrap类。

  .header{
     display: grid;
     grid-template-rows: 1fr;
     grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

上面的代码定义了行数和列数，fr只是一个小数单位。

.number-two{
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

好处是你可以在网格中定义另一个网格！所以我使用两列三行的相当复杂的单元格来做到这一点。并将相同的布局应用于行中的其他单元格，以使值对齐。通常，您必须定义值所属的grid-row: x或grid-column: y，但如果未定义，CSS Grid将自动定位已定义网格的子元素。

此处有更多详情MDN CSS Grid

对齐表格中的元素

1 个答案: