Question

我有一个名为“products”的简单元素。它是一个表，我将列表中的每个产品渲染为dom-repeat中包含子元素的行。但是，即使我在父级和子级上都使用固定宽度，列也不会对齐。有谁知道解决方案？

<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内的表行不与dom-repeat外的标题对齐

1 个答案: