dom-repeat 内的 table 行与 dom-repeat 外的 headers 行不对齐

Question

我有一个名为 "products" 的简单元素。它是一个 table，我将列表中的每个产品呈现为行，在 dom-repeat 中有一个 child 元素。但是，即使我在 parent 和 child 上使用固定宽度，列也不会对齐。有人知道解决方案吗？

screenshot

<template>
<style>

</style>
<tr>
  <th class="col1" style="min-width: 150px;" colspan="1">[[product.col1]]   </th>
  <td class="col2" colspan="1">[[product.col2]]</td>
  <td class="col3" colspan="1">[[product.col3]]</td>
  <td class="col4" colspan="1">[[product.col4]]</td>
  <td class="col5" colspan="1">[[product.col5]]</td>
  <td class="col6" colspan="1">[[product.col6]]</td>
  <td class="col7" colspan="1">[[product.col7]]</td>
  <td class="col8" colspan="1">[[product.col8]]</td>
</tr>
</template>

<dom-module id="product-item">

  <template>
    <tr>
      <th class="col1" style="min-width: 150px;" colspan="1">[[product.col1]]</th>
      <td class="col2" colspan="1">[[product.col2]]</td>
      <td class="col3" colspan="1">[[product.col3]]</td>
      <td class="col4" colspan="1">[[product.col4]]</td>
      <td class="col5" colspan="1">[[product.col5]]</td>
      <td class="col6" colspan="1">[[product.col6]]</td>
      <td class="col7" colspan="1">[[product.col7]]</td>
      <td class="col8" colspan="1">[[product.col8]]</td>
    </tr>
  </template>

codepen here

Answer 1

这是行不通的。 <table>、<thead>、<tbody> 和 <tr> 不支持将自定义元素作为子元素。

这些标签中的所有浏览器（IE、Edge？、...）甚至不支持 <template>。

对于 <template> 实际工作的浏览器，您可以做的是使 <product-item> 成为扩展 <tr> 的元素并像

一样使用它

 <tbody>
    <template is="dom-repeat" items="{{products}}">
      <tr is="product-item" product="{{item}}"></tr>
    </template>
  </tbody>

有关详细信息，请参阅 https://www.polymer-project.org/1.0/docs/devguide/registering-elements。

dom-repeat 内的 table 行与 dom-repeat 外的 headers 行不对齐

table rows inside dom-repeat does not line up with headers outside dom-repeat

polymer-1.0