网格表中单元格的宽度

Question

如何对齐页眉和主体部分的单元格宽度？ 我用绿色复选标记在图片中标记了正确的选项。 https://i.stack.imgur.com/PP1w2.png

我现在的示例和解决方案：https://codepen.io/horus123/pen/YzVOGLQ

<div id="test">
    <div class="table">
            <div class="table__header">
                <div v-for="(item,index) in headers" :key="index" class="table__head-el"> 
                    {{ item.title }} 
                </div>  
            </div>
  <div class="table__body">
            <div v-for="(el, indexx) in tableItems" :key="indexx" class="table__row">
                <span v-for="(elem, indexxx) in el" :key="indexxx" class="table__field">
                    {{elem}}
                </span>
            </div>
  </div>
</div>

Answer 1

一种选择是对标题和主要部分使用相同的grid。换句话说，display: grid 将应用于div.table 元素。为了使该网格的div.table__head-el 和div.table__field 单元格div.table__header、div.table__body 和table__row 必须具有display: contents。 CSS 的其余部分也必须适应，但 HTML 和 JS 保持不变（我在 tableItems 对象的末尾添加了一个空白属性，因此这些项目的长度与标题的长度相匹配）

new Vue({ 
    el: "#test",
    data: {
     headers: [
        {
          title: '#'
        },
        {
          title: 'ID', icon: 'height'
        },
        {
          title: 'Номер', icon: 'height'
        },
        {
          title: 'Тип', icon: 'height'
        },
        {
          title: 'Марка', icon: 'height'
        },
        {
          title: 'Логист', icon: 'height'
        },
        {
          title: 'Колонна', icon: 'height'
        },
        {
          title: 'Трекер', icon: 'height'
        },
        {
          title: 'Дата привязки трекера', icon: 'height'
        },
        {
          title: 'Дата последних координат', icon: 'height'
        },
        {
          title: 'Удалена'
        },
        {
          title: 'Дата удаления'
        }
      ],
   tableItems: [
        {
          number: 1,
          id: '42537370',
          numberCar: 'В855АТ147',
          type: 'Тягач',
          brand: 'Mercedes-Benz',
          logistician: 'Томсон Артём Александрович',
          column: 'Андреев Евгений',
          tracker: '86793',
          dateStart: '29.03.2021 16:42:01',
          dateEnd: '07.06.2021 13:49:39',
          isDeleted: false,
          blank: ''
        },
        {
          number: 1,
          id: '42537370',
          numberCar: 'В855АТ147',
          type: 'Тягач',
          brand: 'Mercedes-Benz',
          logistician: 'Имя Фамилия',
          column: 'Андреев',
          tracker: '48671111111193',
          dateStart: '29.03.2021 16:42:01',
          dateEnd: '07.06.2021 13:49:39',
          isDeleted: false,
          blank: ''
        }
      ],
    },
    computed: {
    },
    methods: {
  }
});

html {
  --border: 1px solid black;
  --border-radius: 8px;
}

.table {
      max-width: 100%;
    padding: 0 75px;
    display: grid;
    grid-template-columns: minmax(0, 60px) repeat(11, minmax(0, auto));
}

.table__header, .table__body, .table__row {
  display: contents;
}

.table__head-el, .table__field {
  padding: 12px 20px;
}

.table__head-el {
  border-top: var(--border);
  border-bottom: var(--border);
  margin-bottom: 20px;
}

.table__head-el, .table__field {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.table__head-el:first-child {
  border-left: var(--border);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.table__head-el:last-child {
  border-right: var(--border);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.table__row:first-child > .table__field {
  border-top: var(--border);
}

.table__row:last-child > .table__field {
  border-bottom: var(--border);
}

.table__field:first-child {
  border-left: var(--border);
}

.table__field:last-child {
  border-right: var(--border);
}

.table__row:first-child > .table__field:first-child {
  border-top-left-radius: var(--border-radius);
}

.table__row:first-child > .table__field:last-child {
  border-top-right-radius: var(--border-radius);
}

.table__row:last-child > .table__field:first-child {
  border-bottom-left-radius: var(--border-radius);
}

.table__row:last-child > .table__field:last-child {
  border-bottom-right-radius: var(--border-radius);
}

.table__row:hover > .table__field {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="test">
  <div class="table">
    <div class="table__header">
      <div v-for="(item,index) in headers" :key="index" class="table__head-el">
        {{ item.title }}
      </div>
    </div>
    <div class="table__body">
      <div v-for="(el, indexx) in tableItems" :key="indexx" class="table__row">
        <span v-for="(elem, indexxx) in el" :key="indexxx" class="table__field">
          {{elem}}
        </span>
      </div>
    </div>
  </div>
</div>