什么是一个优雅的方式来实现这个HTML表使用CSS显示：table + sass？

-3

什么是一个优雅的方式来定义这个HTML表使用CSS显示：表+萨斯？我已经定义使用的div显示表布局：表CSS样式：什么是一个优雅的方式来实现这个HTML表使用CSS显示：table + sass？

<div style="display:table"> 
     {{#definitions}} 
     <div style="display:table-row"> 
      <div style="display:table-cell">{{key}}</div> 
      <div style="display:table-cell">{{value}}</div> 
     </div> 
     {{/definitions}} 
    </div>

上面的例子是用于数据绑定小胡子模板。我需要将风格参考移到sass。什么将是一个优雅的方式来做到这一点？

来源

2017-02-15 user7242966

如果你downvote，那么请INC卢德评论说明为什么 – user7242966

你为什么不使用普通的'

'？您可以使用'

'来显示数据，但不要将它们用于布局。我没有倒下。 – zgood

为什么你不能像任何其他人那样只给一个类分配元素？这与SASS有什么关系？ – Turnip

回答

也许我误解你问什么，但你可以与外部元件上的单一类做这个则应以>子元素，在每个级别给你行和单元格：

.display-table { 
    display: table; 

    >div { 
    display: table-row; 

    >div { 
     display: table-cell; 
    } 
    } 
}

这将产生以下CSS ...

.display-table { 
 
    display: table; 
 
} 
 
.display-table > div { 
 
    display: table-row; 
 
} 
 
.display-table > div > div { 
 
    display: table-cell; 
 
}

<div class="display-table"> 
 
    <div> 
 
    <div>{{key}}</div> 
 
    <div>{{value}}</div> 
 
    </div> 
 
</div>

来源

2017-02-15 19:52:10 Turnip

是的，这是正确的，或者你可以只使用'

'而不必写这个哈哈。我认为 – zgood

@zgood也许会更适合屏幕阅读器和网络爬虫。或许OP会利用'display：table'的表现能力，而不是显示表格数据。在这种情况下，'

'绝对不应该被使用。 – Turnip

他正在显示'{{key}}'{{value}}'对，这是数据 – zgood

什么是一个优雅的方式来实现这个HTML表使用CSS显示：table + sass？

回答

相关问题