在vue环境下，如何将两个表格内的元素对齐？

归思君

1.2k544

发布于
2023-09-22 北京

问题

如下所示，如何将框1和框2的元素对齐

具体环境和代码

我是使用ant-design-vue组件, 具体代码如下

html部分：

 <a-row class="section" v-if="resolvePurchasePlanList && resolvePurchasePlanList.length > 0">
            <div class="detail-item-wrapper" :key="detail.id" v-for="(detail, index) in resolvePurchasePlanList">
              <div class="detail-item-left" v-if="!isDetails">
                <a-checkbox :checked="isSelectedPchPlanIds(selectedDetailsPchPlanIds, detail)"
                            @click="() => changeSelectedDetailPurchaseIds(selectedDetailsPchPlanIds, detail)"
                ></a-checkbox>
              </div>
              <table class="my-table">
                <tr>
                  <td class="label"><span class="danger-label" v-show="!isDetails">*</span>所属项目</td>
                  <td colspan="3">
                      <span v-if="isDetails">
                        {{ detail.projectName }}
                      </span>
                    <a-input :value="detail.projectName" :read-only="true" v-else
                             :class="{ danger: detail.checkSigns.projectName }"/>
                  </td>
                  <td class="label"><span class="danger-label">*</span>采购金额</td>
                  <td colspan="3" style="text-align: right ">
                    {{ formatMoney(detail.purchaseMoneySum) }}
                  </td>
                </tr>
                <tr>
                  <td class="label"><span class="danger-label" v-show="!isDetails">*</span>采购内容</td>
                  <td class="label"><span class="danger-label" v-show="!isDetails">*</span>数量</td>
                  <td class="label"><span class="danger-label" v-show="!isDetails">*</span>金额</td>
                  <td class="label">品牌</td>
                  <td class="label">规格型号</td>
                  <td class="label">计量单位</td>
                  <td class="label">单价</td>
                </tr>

css部分：

.my-table {
  flex: 1;
  width: 100%;
  border-collapse: collapse;
}
  .label{
    padding: 10px 15px;
    height: 40px;
    line-height: 40px;
    border: #cccccc solid 1px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  }

vue.js 前端

html5

阅读 1.7k

AI BotBETA

在Vue环境下，要实现表格元素的水平对齐，你可以使用CSS中的Flexbox或者Grid布局。但在你的问题中，你似乎想在两个不同的表格（框1和框2）之间进行对齐。这有一些困难，因为表格通常是自我封闭的，也就是说，它们各自有自己的高度和宽度。

但是，你可以通过设置外部容器（比如<div>）的样式来实现这一点。在这种情况下，你可能需要将这两个表格放在同一个外部容器中，并设置这个容器的样式使其内部元素水平对齐。

以下是一个可能的解决方案：

<div class="table-container">
    <table class="table1">
        <!-- 表格1的元素 -->
    </table>
    <table class="table2">
        <!-- 表格2的元素 -->
    </table>
</div>

然后在你的CSS中：

.table-container {
    display: flex;
    align-items: stretch;  // 如果你希望表格高度相同
    justify-content: space-between;  // 这将使得两个表格间的距离相等
}

这将使得两个表格内的元素水平对齐。但是请注意，这不会影响表格内部元素的对齐。对于内部元素的对齐问题，你可能需要在每个表格内部使用CSS来设置。

例如，你可以设置每个表格的<td>元素的对齐方式：

.table1 .label, .table2 .label {
    text-align: center;  // 或者其他你需要的对齐方式
}

注意：以上的CSS和对齐方式可能需要根据你具体的HTML结构和样式进行调整。

2 个回答

得票最新

xiaohe0601

1.2k126

发布于
2023-09-22 四川

更新于
2023-09-22

✓ 已被采纳

使用colgroup指定一下每列的宽度，示例如下：

<table>
  <colgroup>
    <col style="width: 200px" />
    <col style="width: 100px" />
    <col style="width: 100px" />
    <col style="width: 100px" />
    <col style="width: 200px" />
    <col style="width: 100px" />
    <col style="width: 100px" />
  </colgroup>
  <!-- 或者使用span属性简写 -->
  <colgroup>
    <col span="1" style="width: 200px" />
    <col span="3" style="width: 100px" />
    <col span="1" style="width: 200px" />
    <col span="2" style="width: 100px" />
  </colgroup>

  <tr>
    <td>所属项目</td>
    <td colspan="3"></td>
    <td>采购金额</td>
    <td colspan="3"></td>
  </tr>

  <tr>
    <td>采购内容</td>
    <td>数量</td>
    <td>金额</td>
    <td>品牌</td>
    <td>规格型号</td>
    <td>计量单位</td>
    <td>单价</td>
  </tr>
</table>